DF/
ES
DF / R&D LABINTERACTIVE EXPERIMENTS / CREATIVE CODE2026 — LAB V2.1 / 4 EXPERIMENTS

PLAYGROUND.

A laboratory for interfaces that respond, generate and transform. These are not static mockups: move the controls, change the rules and take the result with you.

↓ SCROLL TO EXPLORE
01 / TYPOGRAPHY ENGINEHTML · CSS · JAVASCRIPT

KINETIC TYPOGRAPHY

Letters react to the cursor and to rhythm and amplitude controls. A compact physical typography system.

+
+
POINTER / REACTIVE TYPE
UNDER THE HOOD

DOM transforms · spring dynamics · requestAnimationFrame · pointer input

02 / GENERATIVE SYSTEMCANVAS 2D · VECTOR FIELD

FORCE FIELD

Particles follow a vector field. Move your pointer across the scene and tune the turbulence.

FIELD / FLOWLIVE GENERATION
UNDER THE HOOD

High-DPI canvas · vector mathematics · pointer attraction · animation loop

03 / DESIGN TOOLGENERATIVE SVG · EXPORT

GENERATIVE POSTER

A small composition engine: combine typography, geometry and color, then export an editable SVG.

[ LIVE EDITOR / V 1.0 ]

SVG / 600 × 750 / VECTOR OUTPUT

UNDER THE HOOD

SVG DOM · seeded geometry · state-driven rendering · file export

04 / ANIMATION DIRECTORWEB ANIMATIONS API · TIMELINE

MOTION SYSTEM

Design the timing of a visual sequence. Play it and scrub the animation timeline.

SCENE / 004
DESIGN
KEYFRAMES / STAGGER / EASING
UNDER THE HOOD

WAAPI · independent keyframes · easing curves · time scrubbing

DF / END OF EXPERIMENTS

Code can have a visual voice, too.

Animations are reduced according to your system preferences.

Explore projects ↗