Corey Petrini
Corey Petrini is a motion designer with over a decade of broadcast, entertainment, and gaming work behind him: NBC Sports, WWE, HBO, One Championship. Motion doesn't survive a grid of still frames, so we built him a grid that moves. Squarespace underneath, custom code on top, live at coreypetrini.com.
A portfolio grid that moves.
The work page is 22 project rows, each one hand-coded. A still frame runs the full width of the screen; put the cursor on it and the frame crossfades into an animated preview of the piece, with the project title fading in over the bottom corner. Click and you land on that project's own page. The list runs from Sunday Night Football for NBC Sports through WWE, an HBO documentary, One Championship, the Professional Fighters League, Upwork, the NCAA, and a Teenage Mutant Ninja Turtles booth at San Diego Comic-Con.
We built the About and Contact pages alongside it: the bio and the six-line services list, the row of social links out to LinkedIn, Behance, Vimeo, Instagram, and Twitter, and the contact form.
A reel is a bad index.
A demo reel proves a motion designer can do the work. It doesn't tell an art director whether he's done their kind of work, and it makes them sit through ninety seconds to find out. A grid answers that in five seconds, which is exactly where the problem starts: a grid of still frames shows a motion designer's work with the motion taken out.
The obvious fix is worse. Twenty-two autoplaying video players on one page is a slow page, and slow is the one thing a portfolio can't afford, because the people it's aimed at are looking at forty of them in an afternoon.
Two images, one crossfade, no JavaScript.
Each row holds two stacked images, a still and a short animated loop, and CSS crossfades between them on hover over half a second. There's no script, no video player, and no library; the whole behavior is a handful of opacity rules. That means nothing has to load before it works, and there's nothing to break the next time Squarespace ships a change.
Every row is its own self-contained block, so adding a project is a matter of copying one and swapping two image URLs and a caption. That's a job Corey can do himself, which is the arrangement we aim for on every project: able to leave, choosing to stay.
How it's built.
CSS
The hover crossfade, the caption fade-in, and the full-bleed row sizing.
HTML
Hand-written markup, one block per project, so rows can be added or reordered.
Squarespace
The CMS underneath, and the native form on the contact page.
No JavaScript
The hover is CSS only. Nothing to load, nothing to break.
“Alec did an amazing job on my website and I would absolutely hire him again.”Corey Petrini Motion Designer
Tell us what you're building.
Every project starts with a conversation, not a contract. We respond within 24 hours.
Start a Project