5 unique animation styles matched to the portfolio's dark + gold brand. Scroll down to trigger each one.
Style 01
Characters slide up from behind a mask with staggered timing, then a gold underline sweeps across the full width. Clean, editorial, and premium. The reveal feels like a curtain lifting.
Style 02
Each character starts heavily blurred, scaled down and transparent, then sharpens into crystal-clear focus with staggered timing. Creates a "materializing out of fog" effect. Sophisticated and cinematic.
Style 03
Characters appear one by one with a blinking gold cursor that travels across the text. When complete, the cursor blinks twice and fades out. Feels like the heading is being typed live. Minimal, developer-inspired, intentional.
Style 04
The heading splits at the center character. Left half slides in from the left, right half from the right, meeting in the middle with a brief gold flash on collision. Dramatic, dynamic, impactful.
Style 05
The heading starts as thin outlined text (transparent with a gold stroke), then the gold color fills up from bottom to top like ink rising inside the letterforms. Pure CSS, no JS needed for the fill. Elegant and distinctive.
Style 06
Each letter flips into view from a 3D face-down rotation, like a row of dominoes standing up. A subtle gold text-shadow glows on landing. Feels physical and tactile — letters have weight.
Style 07
Letters start scattered randomly — each at a different position, rotation, and distance. On trigger, they all fly into their correct position simultaneously. Chaos to order. Magnetic.
Style 08
Each letter flickers to life like a neon sign — rapid on/off blinks before stabilizing with a warm gold glow. Letters light up left to right with tight staggering. Feels electric and alive.
Style 09
Letters rise up from below with a bouncy sine-wave overshoot — each one pops past its final position then settles back, creating a ripple effect across the heading. Playful but refined.
Style 10
Letters drop from above with realistic gravity and bounce on landing — a quick overshoot down, small bounce up, then settle. Staggered left to right. Physical, punchy, satisfying.
10 subtle per-word animations designed for paragraph text. Each executes within 1 second so reading flow isn't disrupted.
Body 01 — Soft Fade Up
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words fade in while gently rising from 20px below. Classic, restrained, works anywhere.
Body 02 — Gentle Blur In
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words start blurred and sharpen into focus. Feels like text is being dictated into existence.
Body 03 — Slide Right Reveal
Words slide in from 14px to the left as they fade. Natural reading direction, feels like text is being placed.
Body 04 — Line Mask Wipe
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Each line slides up from behind an invisible mask, one after another. Editorial, poster-like. Per-line (not per-word).
Body 05 — Scale Breathe
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words scale from 0.92 to 1.0 with a subtle overshoot on the easing curve — like text breathing into place.
Body 06 — Color Warm-Up
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words appear dark gray and warm up to full body color as they come into view. Subtle chromatic reveal.
Body 07 — Skew Release
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words start with a 4-degree skewY tilt and snap to vertical as they settle. Feels physical, like text is relaxing into place.
Body 08 — Border Grow
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
A gold accent line grows from top to bottom on the left edge while the paragraph fades in. Editorial, pull-quote inspired.
Body 09 — Highlight Sweep
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
A warm gold highlight sweeps across the paragraph from left to right, like a marker pass. Then fades naturally. No word split needed.
Body 10 — Depth Stack
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words start offset into the z-axis (blurred and pushed back), then pull forward into focus. 3D depth reveal, cinematic but subtle.
Body 11 — Diagonal Clip Wipe
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Each word is revealed via a diagonal clip-path sweep — like a paint roller passing across the text at a 25° angle. Crisp, editorial, unexpected.
Body 12 — Elastic Stretch
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words start tall and narrow (scaleX 0.5, scaleY 1.6), then snap to normal proportions with an elastic overshoot. Bouncy but fast — completes in under a second.
Body 13 — Chromatic Split
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Words appear with a brief RGB-shift split (gold + cyan offset) that resolves into crisp text. Feels glitchy and modern, like a signal stabilizing.
Body 14 — Iris Open
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Each word is revealed by a circular clip-path opening from the center — like a camera aperture expanding. Unusual and distinctive.
Body 15 — Spring Flip 3D
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Each word flips forward on the X-axis from -90° to 0° with a springy overshoot — like cards rotating into view from behind the line of text. Tactile and physical.
Body 16 — Wave Rise
I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking.
Each line emerges from a clipped mask, sliding up from below with smooth easing. No opacity fade — just pure geometric reveal. Staggered line-by-line for an editorial, poster-like cadence.