Twirl Portfolio
Scroll-reveal portfolio with signature "twirl" card animations, built in both vanilla HTML and Astro versions.
The Twirl Portfolio is centred around a distinctive card animation — as users scroll, project cards rotate into view with a 3D twirl effect that catches the eye without overwhelming the content. I built this concept twice: first as a vanilla HTML/CSS/JS proof-of-concept to nail the animation physics, then rebuilt it in Astro for production with component reusability and optimised asset loading.
Vanilla HTML + Astro
Signature Scroll-Reveal Animations.
A portfolio concept featuring custom 3D twirl animations on scroll, implemented first in vanilla web technologies then productionised in Astro for component architecture and performance.
Project Overview
From animation prototype to production component system.
The twirl animation uses CSS 3D transforms triggered by Intersection Observer — each card rotates along the Y-axis while translating upward, creating a distinctive reveal that draws the eye to each project without feeling gimmicky. The vanilla version was built first to iterate rapidly on timing curves, rotation angles, and stagger delays. Once the animation felt right, I rebuilt the entire portfolio in Astro, extracting the twirl card into a reusable component with configurable animation parameters. The Astro version adds static-site generation, image optimisation, and proper component architecture while preserving the exact same animation feel. As a Gold Coast web designer and developer, I use the Twirl Portfolio as a reference implementation for scroll-triggered animations. The project demonstrates how to create memorable, interactive experiences without requiring heavy JavaScript frameworks or libraries. The animation technique uses CSS perspective and transform-style: preserve-3d to enable 3D space. Each card is a 3D object in this space, rotating along the Y-axis (the vertical line through its center). The rotation starts at 90 degrees (card edge-on to the viewer) and rotates to 0 degrees (fully visible). Simultaneously, the card translates upward, creating the illusion of the card rotating into view from below. This combination of rotation and translation creates the distinctive "twirl" effect that catches attention. Intersection Observer is the key to triggering animations only when cards enter the viewport. Rather than checking scroll position continuously (which is inefficient), Intersection Observer fires a callback when an element crosses a threshold — in this case, when 10% of the card is visible. This triggers the animation class, which starts a CSS animation sequence. Unobserved cards reset to their initial state, so if users scroll back up, they'll see the animation again, creating a polished, reusable experience. Timing curves are critical to animation quality. The vanilla prototype used cubic-bezier functions to match the physics of real-world rotation. Easing-in (starting slow, accelerating) creates anticipation. Easing-out (starting fast, decelerating) creates a settling feeling. The final timing landed on a 0.8-second animation with a moderate ease-out curve, fast enough to feel snappy but slow enough to be readable. Stagger delays make sequential animations feel orchestrated rather than chaotic. Each card delays 50-80ms more than the previous one, so cards animate in a wave as users scroll. This visual rhythm is subtle but creates a sense of order and intentionality. The stagger timing is configurable, allowing different portfolio sites to dial in different feels. The Astro rebuild focused on production-readiness. Image optimization automatically converts project photos to modern formats (WebP/AVIF) with responsive srcsets. Lazy loading ensures images load only when needed. Critical CSS is inlined to ensure animations start immediately without waiting for stylesheets to download. The build process minifies and bundles CSS animations for performance. Component architecture in the Astro version extracts the twirl card into a reusable Twirl Card component with configurable props — animation delay, rotation angle, card content. This allows different portfolio sites to reuse the exact same animation logic while customizing appearance. The component uses Astro's scoped styling, keeping animation CSS isolated and preventing global namespace pollution. Accessibility was considered throughout. The animation can be disabled via prefers-reduced-motion media query for users sensitive to motion. Content is readable even without animation, with the twirl effect treated as an enhancement rather than essential. Keyboard navigation works perfectly alongside the scroll-triggered animations. Performance benchmarks show the Astro version delivers Lighthouse scores consistently above 95 across performance, accessibility, and best practices. CSS animations run on the GPU, causing no frame drops even on lower-end devices. The entire portfolio, including all images and animation code, stays under 200KB uncompressed, enabling sub-second page loads even on slower connections.
Visual Design and Brand Expression
Animation that reflects brand personality.
The twirl animation works in different visual contexts. On dark backgrounds, the card animates with high contrast for maximum visual pop. On light backgrounds, subtle shadows create depth. The animation respects the brand's personality — a luxury brand might use slow, elegant easing while a startup might use punchy, energetic timing. Project cards contain rich information: project thumbnail, project title, project category/tags, brief description, and link. The animation draws attention to the card as it appears, increasing likelihood that users notice and click through. Hover states provide additional feedback. Hovering a card shows additional information or changes the background slightly. This provides tactile feedback that the element is interactive. The portfolio layout adapts to different screen sizes. On desktop, cards are large with plenty of whitespace. On mobile, cards are narrower but maintain the distinctive twirl animation. The animation timing is consistent across breakpoints for a cohesive experience. Dark mode support ensures the portfolio is readable and attractive in both light and dark environments. Cards have semi-transparent backgrounds that blend with the background while remaining readable.
Technical Implementation and Iteration
From vanilla prototype to production component library.
The vanilla HTML version served as a rapid prototyping environment. By avoiding framework overhead, I could iterate on the animation feel in real-time without waiting for build processes. Testing different rotation angles, stagger timings, and easing curves was as simple as changing CSS values and refreshing the browser. This fast feedback loop helped nail the exact animation feel before investing in production code. The key breakthrough was discovering the right easing curve. Early versions used linear easing, which felt robotic. Ease-out easing felt more natural. Eventually, I landed on a cubic-bezier curve that mimicked the physics of something rotating under friction — fast at the start, decelerating as it approached its final position. Stagger timing also required experimentation. Cards animating all at once felt overwhelming. Cards staggering too much felt sluggish. The optimal timing appeared to be 50-80ms between each card — fast enough to feel orchestrated but slow enough to parse visually. Once the animation felt right, the Astro rebuild prioritized developer experience and maintainability. The twirl card became a reusable component accepting props for animation delay, rotation angle, and content. TypeScript typing ensured developers couldn't accidentally pass invalid props. The component used Astro's scoped styling, preventing global CSS pollution.
The build pipeline optimized for performance. Astro statically generates every portfolio page at build time, outputting static HTML with zero runtime overhead. Critical CSS is inlined in the HTML head, ensuring animation code is available immediately. Responsive images using srcset ensure users download appropriately-sized images for their devices. Lazy loading defers off-screen image loading. Testing the animation across browsers revealed Safari and Chrome had slightly different transform rendering, requiring vendor-specific tweaks. Mobile devices with lower refresh rates needed animation timing adjustments to look smooth at 30fps instead of 60fps. The portfolio demonstrates how animation can enhance user experience without becoming a gimmick. The twirl effect serves a real purpose — it draws attention to each project and creates visual rhythm as users scroll. It's fast enough to feel snappy, not so slow as to annoy users who've seen it before. The animation is skippable via prefers-reduced-motion, respecting users' preferences. This project established patterns for animation-driven websites that I use across client projects. The principle is simple: prototype in vanilla web technologies for fast iteration, then build production versions in modern frameworks with proper architecture and performance optimization.