Lab

Animation sandbox. Local only.

Theme Toggle

Circular clip-path reveal with View Transitions API

Light Theme

Dark Theme

Duration 500ms

Easing ease-out

Start X Offset 0px

Start Y Offset 0px

Post Card Hover

Title color transition and pill ping animation

Technical

Apr 23, 2026

Example Post Title

A brief description of the post that spans two lines and demonstrates the hover effect.

Title Transition Duration 200ms

Title Transition Easing cubic-bezier(0.16, 1, 0.3, 1)

Ping Duration 500ms

Ping Scale 1.4

Throb Duration 1400ms

Throb Scale 1.06

Stagger Delay 80ms

Badge Ping

Category pill ping and throb ring animations.

Technical Essay Project

Ping Duration 500ms

Ping Start Scale 1.0

Ping End Scale 1.4

Ping Start Opacity 0.7

Ping Easing 0.16,1,0.3,1

Throb Duration 1400ms

Throb Min Scale 1.0

Throb Max Scale 1.06

Throb Min Opacity 0.12

Throb Max Opacity 0.22

Throb Easing 0.45,0,0.55,1

Auto-repeat

off

Game of Life

Click and drag to seed cells. Adjust parameters below.

Simulation Speed 5

Cell Fade In 0.06

Cell Fade Out 0.02

Trail Fade 0.08

Base Opacity 0.06

Mouse Glow 0.18

Mouse Radius 120

Seed Density 0.25

Link Hover

Center-out expanding underline with text color transition

Home ← Back to blog

Underline Duration 200ms

Underline Easing ease-out

Underline Height 1.5px

Underline Color Accent

Underline Offset -2px

Text Color Duration 200ms

Icon Fade Duration 200ms

Icon Slide Distance 1px