Guides · · Maxwell Prehoda
12 Portfolio Website Animation Examples That Get Remembered (and What Each Costs to Build)
The portfolios people remember pick one motion idea and commit to it: a car you drive around a 3D world, a site that stretches like elastic when you resize it, sparkles that mark the things the author loves. The idea says something about the person; the craft proves they can build it.
Each entry below is a real, live portfolio, with what it animates, the stack it uses (checked against the source code or a published write-up where one exists), who it suits and what it costs you. They range from a weekend of CSS to months of Three.js, so you can pick the level you can actually finish. Pure CSS versions of the patterns from our directory play live where they fit.
1. Bruno Simon's drivable portfolio: Best for creative developers whose portfolio is the demo
Platform: Three.js, Cannon physics, GSAP, Howler
Bruno Simon's 2019 portfolio turned the site into a small game: you drive a little car around a 3D world to reach his projects and social links. The open-source repo shows how it is built, with Car, Physics, Controls, Sounds and EasterEggs modules on top of three.js, cannon for physics, GSAP for tweens and Howler for audio. It was an Awwwards Site of the Day on November 11, 2019, tagged 3D, Three.js and Gestures.
He has since rebuilt it (the folio-2025 repo has systems for a vehicle, tracks, weather and terrain) and teaches the techniques in his Three.js Journey course.
Our Car Driving Loader below is a tiny pure CSS nod to the idea: a car with spinning wheels bouncing along a moving road.
Watch out for: A game as navigation hides your work from anyone in a hurry, including recruiters on phones. If you copy the idea, also give visitors a plain list of projects and contact links.
2. Lynn Fisher's yearly refresh: Best for CSS artists who want the site itself to be the work
Platform: HTML, CSS, a little JavaScript
Lynn Fisher, a web designer, CSS developer and artist from Phoenix, redesigns lynnandtonic.com most years and writes a case study for each refresh; she notes 2026 will be the 20th. The 2025 version is a fixed 436 px column that stretches like elastic when you resize the browser and bounces back when you stop.
Her write-up explains it plainly: a ResizeObserver turns the change in window width into a scale(x, 1) transform on the content, Math.max(0.01, ...) stops it flipping inside out, and 200 ms after resizing ends a CSS transition with a bouncy cubic-bezier snaps it back. Below 500 px it becomes a normal responsive layout for phones.
Our Rubber Band keyframe below is a pure CSS version of that stretch-and-snap feeling.
Watch out for: Her ideas work because they reward people who poke at the page. Make sure the plain reading experience is good first, since most visitors never resize the window.
3. Brittany Chiang's v4: Best for engineers who want polish without a gimmick
Platform: Gatsby, ScrollReveal, anime.js, open source
Brittany Chiang's fourth site is one of the most copied developer portfolios on GitHub, with over 8,000 stars and 4,000 forks. Its motion is restrained: an anime.js timeline draws her logo with strokeDashoffset on load, the hero lines fade up in sequence with react-transition-group, and sections reveal on scroll through ScrollReveal set to 20 px from the bottom over 500 ms with cubic-bezier(0.645, 0.045, 0.355, 1), playing once.
The detail that makes it a good model: a usePrefersReducedMotion hook skips the hero sequence and shows the content immediately for people who ask for less motion.
Our Fade In On Scroll below does the same reveal with no library, using animation-timeline: view() in CSS.
Watch out for: She asks that forks credit her by linking back to brittanychiang.com and not claim the design as their own. Thousands of near-identical clones also make it a poor choice if you want to stand out.
4. Henry Heffernan's 3D computer: Best for software engineers who want one unforgettable hook
Platform: Three.js, React, TypeScript, GSAP
Henry Heffernan's 2022 portfolio is a 3D desk scene whose computer monitor runs a second, 2D website styled as an operating system. The source is split the same way: the main repo has Computer, MonitorScreen, CoffeeSteam and Cursor modules in its three.js world, and a separate portfolio-inner-site repo holds the OS that renders on the screen.
It is a clever answer to the hardest portfolio question, how to be memorable without hiding the content: the novelty is the frame, and inside it is a normal, clickable site. The repo has around 2,600 stars, so plenty of people have studied it.
Our 95 Style Startup Screen below is a pure CSS nod to the retro OS boot.
Watch out for: A full 3D scene is heavy on first load. Show a poster or loading state that already tells visitors who you are, in case the scene never finishes on their device.
5. Dennis Snellenberg's portfolio: Best for freelance designers selling custom web builds
Platform: GSAP, Barba.js, Locomotive Scroll
Dennis Snellenberg is a freelance designer and developer in the Netherlands, and his portfolio was an Awwwards Site of the Day on April 4, 2022. Awwwards lists the stack as GSAP, Barba.js and Locomotive Scroll, and its jury scored animations and transitions 8.00, the highest of his developer marks.
That stack tells you the style: smooth scrolling, page transitions that keep you inside one continuous experience, parallax and microinteractions on buttons and links. For a freelancer it doubles as a sales pitch, since it shows clients the kind of site they could buy.
Our Magnetic Button Hover Effect below is the kind of microinteraction this style uses, in pure CSS.
Watch out for: Smooth-scroll libraries take over native scrolling. Test with a trackpad, a mouse wheel, the keyboard and a screen reader, and keep the scroll speed close to native.
6. Josh W. Comeau's sparkles: Best for bloggers and teachers who want warmth, not spectacle
Platform: React + CSS keyframes
Josh Comeau's site is full of small, whimsical touches, and his sparkle effect is the signature. He built it as a cheerful counterpart to strong and em: wrap text, an image or a button and little SVG stars twinkle around it at random sizes, positions and intervals. Each sparkle scales up and back down on one element and rotates on another, so the two animations can have different easings.
His write-up covers the parts that make it shippable: pointer-events: none so clicks pass through, old sparkles removed so the DOM does not fill up, and under prefers-reduced-motion the animation stops and a few sparkles stay still. On his own blog they only generate while on screen.
Our Sparkle Text Effect below is a pure CSS version: four-point stars pop and spin over a gradient word in turn.
Watch out for: Whimsy works in small doses. Put sparkles on one or two things per page, or they stop meaning anything.
7. Rauno Freiberg's craft page: Best for design engineers showing process, not just results
Platform: Personal site with interactive prototypes
Rauno Freiberg's site treats the portfolio as a lab notebook. The craft page lists dozens of small interaction studies (Radial Menu, Gooey Tooltip, Hold Enter to Confirm, Precision Slider, Theme Motion, Animated Checkboxes, Command Menu) next to essays like Invisible Details of Interaction Design and a write-up on crafting the Next.js website.
For a design engineer this format beats a grid of finished case studies. Each prototype is one idea, explored until it feels right, and the collection shows taste and range at a glance.
Steal the structure: a list of small, dated experiments you can keep adding to, instead of a portfolio you redo every two years.
Watch out for: Many short experiments need a clear thread. Give each a one-line "what I was exploring" so visitors who skim still learn what you care about.
8. Emil Kowalski's site and components: Best for showing taste through things people actually use
Platform: Personal site + open source React libraries
Emil Kowalski is a design engineer at Linear who previously worked on Vercel's design system and dashboard. His strongest portfolio pieces are open source: Sonner, a toast component, and Vaul, a drawer, which together his course page says are downloaded over 90 million times a week on npm.
That is the lesson. Polished motion in a component thousands of developers install proves more than any hero animation, and his writing and his course, animations.dev, explain the thinking behind it: easing, springs, timing and when not to animate.
If you are an engineer, one small, well-animated open source component may do more for your portfolio than a redesign.
Watch out for: Open source needs maintenance. Only publish a component you are willing to support, or mark it clearly as an experiment.
9. Jhey Tompkins's prototypes: Best for CSS experimenters with a CodePen backlog
Platform: Personal site + CodePen
Jhey Tompkins, now in Shopify's Brand Design Studio and previously at Google and Vercel, describes his site as prototypes, notes and experiments in CSS, motion and interface craft. The homepage leads with recent prototypes such as Pluckable Grid, Portal Gesture Icon and Refractive Gem, each linking to a live demo on CodePen.
The format works because the work is the motion. Visitors can play with every piece in the browser rather than watch a video of it, which is the most convincing proof a front-end developer can give.
If you already make pens, curate the best ten onto your own domain with one sentence each about the technique.
Watch out for: Experiments are not case studies. If you want client or job work, add at least one piece showing a real problem, constraints and outcome next to the playful ones.
10. Our Line Mask Reveal for your name: Best for an editorial hero headline in ten minutes
Platform: Motions directory, free, HTML + CSS Ours
Each line of the headline slides up out of an invisible mask, one after another, the way editorial and agency sites reveal titles. It is pure CSS, plays once and has a prefers-reduced-motion guard that shows the text at rest.
It is the cheapest way to give a portfolio hero some presence without a library. For other styles, the text reveal collection has word-by-word, split and spotlight reveals.
Watch out for: Reveal your name, not every heading. One entrance on the hero is confident; the same reveal on every section reads as a template.
11. Our project card image hovers: Best for a work grid that invites a click
Platform: Motions directory, free, HTML + CSS Ours
The go-to hover for project grids: the image pushes in while a dark tint settles over it and a label appears in the middle. It is CSS transitions only, no JavaScript, so it drops into any grid.
If you want something with more character, the image hover collection has duotone-to-color, page curls, polaroids and fanned photo stacks, each with the same colour and size custom properties.
Watch out for: Do not hide the project title until hover. Phones never hover, so keep the name and role visible under the image.
12. Our inspiration board: Best for finding a motion idea that fits you
Platform: Motions inspiration board, free Ours
Before you copy someone else's signature, browse. Our inspiration board is an endless wall of motion pieces, made for you and Claude, that you can scroll until something feels like you, then take into the Studio to build a scene or into the creator for CSS keyframes.
If you are a motion designer rather than a developer, the reel side matters too: our post on a motion designer showreel prompt walks through building one with AI.
Watch out for: Inspiration is a starting point. Change the subject, palette and timing until it is clearly yours, the same rule that applies to every portfolio above.
How to choose your portfolio's animation
Pick the one idea you will actually finish.
Match it to what you sell
A WebGL developer should show WebGL, like Bruno Simon. A CSS artist should make CSS the art, like Lynn Fisher. A product engineer is better served by restraint, like Brittany Chiang's v4, or by shipped components, like Emil Kowalski. The motion should be a sample of the work you want to be hired for.
Match it to your time budget
An afternoon: a hero text reveal, card hovers and a scroll fade, all pure CSS. A weekend: one signature interaction, like sparkles or an elastic resize. Months: a 3D world or a site inside a site. Half-finished ambitious portfolios are worse than finished simple ones, so size the idea to the time you really have.
Match it to your visitors
Recruiters skim on phones; other developers poke around on desktops. Make sure the plain path (name, role, three projects, contact) works in ten seconds with no animation, respect prefers-reduced-motion as v4 does, and put the playful layer on top for the people who stay.
Give your portfolio one memorable moment this weekend
Decide what you want a visitor to remember in one sentence, then pick the smallest motion that says it. For most people that is a confident hero reveal, project cards that respond, and one personal touch.
Copy the building blocks from our directory, or describe the moment you want and refine it in chat until it feels like you.
Make a portfolio hero for a front-end developer: name on one line, role on the next. Reveal each line by sliding it up out of a mask, 600 ms each, 120 ms apart, cubic-bezier(0.22, 1, 0.36, 1), playing once on load. After the text lands, a small hand-drawn underline draws under the role in 400 ms. Pure HTML and CSS, no JavaScript. Under prefers-reduced-motion, show everything at rest immediately.
Common questions
Should a portfolio website have animations?
A little, chosen on purpose. Motion shows craft and personality, but the basics (who you are, what you do, your best work, how to reach you) must work instantly without it. Every portfolio above keeps a fast path to the content.
What is the most famous animated portfolio?
Bruno Simon's, where you drive a small car around a 3D world built with three.js. It was an Awwwards Site of the Day in November 2019, its source is open on GitHub, and he has since rebuilt it.
What tools do animated portfolios use?
Pure CSS for hovers and reveals; GSAP, Barba.js and Locomotive Scroll for page transitions and smooth scrolling (Dennis Snellenberg's stack); three.js for 3D (Bruno Simon, Henry Heffernan); and small libraries like ScrollReveal and anime.js for scroll reveals and intros (Brittany Chiang's v4).
Can I copy a portfolio template from GitHub?
Check the license and the author's wishes. Brittany Chiang's v4 is MIT licensed but she asks for credit with a link back and not to claim the design as your own. A copied template also looks like thousands of others, so change it substantially.
Do animations hurt a portfolio's performance?
CSS animations on transform and opacity cost almost nothing. 3D scenes and smooth-scroll libraries add real weight, so ship a fast poster state, test on a mid-range phone, and honor prefers-reduced-motion.