Back to buildsBUILD RECORD

Tiny Party / HTML motion experiment / 2026

Coordinating a short motion scene on one timeline.

Tiny Party combines GSAP timing with index-based confetti settings, keeping the scene's arrangement repeatable and its playback under an external controller.

ROLE
Creative coding / motion study
STATE OF THE BUILD
Study
RECORD UPDATED

THE WORK

The project.

Tiny Party is a six-second Hyperframes composition built from HTML, CSS and a single GSAP timeline. Type, shapes, bounces and colour changes share that timeline, while 64 confetti pieces get their positions and animation settings from their indices. Recreating the scene therefore uses the same arrangement instead of choosing another random one. The paused timeline is registered for playback through an external controller.

IMPLEMENTATION

Design choices.

  1. One timeline keeps the relative timing of entrances, bounces and colour changes together. An external controller can address the composition through that timeline instead of coordinating separate animation loops.
  2. Index-based calculations make the confetti settings repeatable while still varying their sizes and motion. They describe the scene consistently; they aren't a verified guarantee about exported frames.
  3. Fixed frame dimensions give every motion path a stable coordinate space. This is a video composition, not a responsive page layout.

HOW IT FITS TOGETHER

Architecture.

  • Composition attributes declare a 1920 by 1080 frame and six-second duration. HTML and CSS define the layered type and shapes within those fixed coordinates.
  • JavaScript creates 64 confetti elements and calculates each one's position, dimensions, colour and movement from its index. The same calculations reconstruct the same settings each time.
  • A paused GSAP timeline places the overlapping animations at explicit offsets and registers itself in window.__timelines. The Hyperframes controller owns playback rather than the scene starting independent timers.

MADE WITH

HTML · CSS · JavaScript · GSAP · Hyperframes

CHECKS & RESULTS

What was checked.

A source review shows what the code does. It is not a fresh test of the running app.

  1. Code and development records reviewedReviewed

    The code, tests and available development records were checked. Reported test results keep their original scope. No fresh app or live deployment check was run for this write-up.

    Scope of this check
    Code review, not a fresh run of the app

NEXT

Still to work through.

The source defines the scene and its controller connection. Availability of the external GSAP script, actual playback and an exported video weren't checked in this review.