00 · thesis

Animation, down to the value.

A showcase of GSAP techniques rendered in frosted glass and volumetric green light. Every interaction is built on exact, inspectable values — drag, scroll, hover, click.

0flick to shoot
A / 05scroll

Scroll to resolve the field.

A flat lattice rises into a lit terrain as the section is pinned and scrubbed — every point mapped from a single 0→1 progress value.

progress
0.000
points
0
elevation
0.00
state
idle

SCROLLTRIGGER — pin · scrub · progress 0→1 · 4 200 points

B / 05ui · flip

A menu that becomes an app.

A rail of glass icons unfolds into a labelled sidebar and a live screen slides in. Pick a section and Flip records the layout, swaps the content, and animates the exact delta.

FLIP — getState → DOM change → from() · absolute · nested

C / 05svg · morph
play

One path, four states.

MORPHSVG — transport states · rotational interp

svg · draw

Drawn to spec.

DRAWSVG — stroke reveal · dash offset

D / 05text · split

Motion, down to the value.

Hover to re-split.

SPLITTEXT — lines/words/chars · staggered mask · auto-revert

E / 05physics · inertia

Charge the loop.

Hold the pad to build energy, release to launch. Too little and the car stalls near the top and drops; enough momentum and inertia carries it clean through the 360°.

charge
0%
speed
0
state
idle
clears
0 / 0

PHYSICS — energy · gravity · momentum · inertia