Skip to content
Ranjith Rajshekar

Lab / 03

Motion Hero Library

“Eleven hero sections, each built around one motion idea.”

Interaction · 11 live heroes · films 1920 × 1080 · 60 fps · 2026
  1. 01Liquid FieldOpen live

    A pool of liquid chrome with the headline suspended beneath its surface.

  2. 02Particle GravityOpen live

    A single cloud of points that keeps becoming something: nebula, wordmark, planet, nebula.

  3. 03Kinetic GridOpen live

    A Swiss-print grid that behaves like fabric: it dents, folds into walls and turns on its axis.

  4. 04Orbital SystemOpen live

    A horological orrery: product modules ride inclined orbits around a luminous core.

  5. 05Type MachineOpen live

    Giant variable type run like machinery: strips, reels, pistons and slices.

  6. 06Chromatic GlassOpen live

    Frosted interface slabs floating over a living gradient, splitting the light that passes through them.

  7. 07Signal NetworkOpen live

    A field of devices routes light along circuit traces into one product object at the centre.

  8. 08Geometric BloomOpen live

    An ink-drawn mandala that breathes, blooms and changes its symmetry — six, eight, twelve, six.

  9. 09UI DimensionOpen live

    A real interface pulled apart in 3D space — surface, grid, components, content, interaction.

  10. 10Generative WorldOpen live

    A flight over an endless procedural dune sea, toward a colossal ring standing on the horizon at dusk.

  11. 11Tree of LifeOpen live

    A sacred fig grows from a single glowing seed in a misty forest clearing — bark, leaves and light, breathing as one.

About the experiment

Eleven heroes, one shared motion system.

Each runs live in the browser and renders to a ten-second film from the same scene code, through an AI-assisted workflow with human art direction, iteration and final QA.

Format
11 interactive heroes · films 10s · 1920 × 1080 · 60 fps
Built with
WebGL2, GLSL, Canvas, CSS 3D, GSAP, React, Remotion
Material
Original code throughout. Every brand, interface and line of copy is fictional demo content.

In the library

  1. 01

    Liquid Field

    Pointer presses a dimple into the surface; its lag behind the cursor carves a wake.

  2. 02

    Particle Gravity

    The cursor is a gravity well: nearby points fall in and orbit it.

  3. 03

    Kinetic Grid

    The cursor is a weight on the sheet: a dent follows it, ray-cast onto the plane.

  4. 04

    Orbital System

    Pointer tilts the whole instrument in 3D; the bezel turns against it.

  5. 05

    Type Machine

    Letters near the cursor swell in width and weight — the type leans into the hand.

  6. 06

    Chromatic Glass

    A clear lens trails the cursor and magnifies whatever it crosses.

  7. 07

    Signal Network

    Nodes near the cursor wake: they glow, ring and fire extra signals home.

  8. 08

    Geometric Bloom

    The cursor's bearing tunes the figure: layers turn toward it at different ratios.

  9. 09

    UI Dimension

    Pointer orbits the camera around the stack.

  10. 10

    Generative World

    Pointer steers the camera's gaze across the horizon.

  11. 11

    Tree of Life

    Branches near the cursor lean away and open; warm light gathers on the bark it passes.