This wasn't a client project — it was a self-initiated challenge: animate the Contra onboarding experience as a proof of concept that demonstrates what a platform could feel like when motion design is treated as part of the product, not an afterthought. The goal was to show, not tell, what I do — by doing it on the platform I use to find work.

Most freelancer profiles are static. Text, thumbnails, a reel. Nothing moves, nothing breathes. Clients scrolling through Contra are making fast judgments — and for a motion designer, a static portfolio is a contradiction. If you animate for a living, your portfolio itself needs to be animated.

I wanted to create something that solved this: a piece that demonstrates craft while simultaneously being about the platform it lives on.

I built the animation in three acts, each designed to do specific psychological work on the viewer.

Act 1 — The Intro (0:00–0:05) A single four-pointed star on a white field. Nothing else. This is restraint as a statement — confidence without noise. The star is Contra's own mark, and leading with it immediately grounds the piece in the platform's identity while signaling that this is purposeful, not accidental. Minimalism earns attention before complexity spends it.

Act 2 — The Onboarding Walkthrough (0:05–0:18) The Contra profile UI is animated with a typewriter-style effect — the name "Steve Letter" builds letter by letter in the actual input fields, the cursor blinks, the interface breathes. This is UI animation with intent: it mirrors exactly how a new user would experience signing up, but rendered with cinematic timing. The transition into the case study creation screen — "Create case study" appearing alongside "Add work" — is a self-aware moment. The video is a case study, about making a case study. That kind of conceptual loop makes content memorable.

The purple gradient card expands to reveal structured content: objective, process, tools. The scroll reveals kinetic motion callouts about Figma asset creation and Jitter-based easing — specific, technical, credible. I used Jitter's high-frequency easing curves to ensure every element snaps with weight and precision, not floatiness. The "Publish!" button at the end of this act functions as a narrative beat — it closes a loop and signals momentum.

Act 3 — The Payoff (0:18–0:28) The final act shifts to a dark, cinematic scene: the profile photo framed in a glowing purple arc against a near-black purple gradient. The arc draws the eye and signals completion — this is someone who finished the work. Then UI badges explode outward in dynamic 3D space: "Hired X5," escalating to "Hired X11," "Top Independent," and the closing line — "You're in the top 5% of Creatives."

This sequence is psychologically precise. Social proof delivered through motion hits harder than static text. The numbers feel earned because the animation builds toward them. By the time "Top 5%" appears, the viewer has already been taken on a journey that justifies the claim.

Figma — UI component design and pixel-accurate asset creation Jitter — animation with high-frequency easing for tactile, snappy motion After Effects — compositing and cinematic scene transitions

I can translate a brand's identity into motion without losing the logic of the original design system. I understand timing not just as aesthetics but as psychology — when to hold, when to snap, when to let a frame breathe. And I can concept, design, and animate a finished piece independently, from a blank canvas to a published result.

The video is 17 seconds long. Every second is intentional.

This piece is a live demonstration of what motion design does to a profile — it turns a page into an experience. The work speaks for itself because it was designed to.