SNOWBROS Start a project

snowbros2107@gmail.com GitHub

Working benches, not screenshots.

Six benches from Creative Engineering — our open-source agent skill and the @snowbros/* libraries — running in this page. Change a parameter; the code changes with you.

Start with motion Source on GitHub

A Motion lab

Choreograph a sentence.

Split text accessibly, pick a curve, set the stagger, then play or scrub the timeline by hand.

splitText · timeline · stagger · cubicBezier · springEase

Every frame has a reason.

1.000
Split by
Curve
40 ms
800 ms
Enter from
Code

B Interaction lab

Feel the difference.

Three primitives, each usable by pointer, touch and keyboard. On touch screens the pointer-only effects step aside instead of misfiring.

magnetic · tilt · spotlight · createSpringValue

magnetic() · pressable() With a mouse the target leans toward the pointer within 80 px and springs home; on touch it squashes under your thumb. 0 activations

tilt() + spotlight() Perspective tilt and a light that follows the pointer. Keyboard: focus the pass, use arrow keys.

createSpringValue() Hold for one second — release early and the spring rewinds. Works with Space and Enter.

C Space lab

Grow it. Turn it. Measure it.

The hero crystal, in a stage of its own. It draws a frame only when something changes — watch the counter stay still when you do.

withFallback · createStage · createOrbitInertia · createParticleField

frames drawn
0
draw calls
0
geometries
0
pixel ratio
—
renderer
pending

Drag or use arrow keys to rotate

1.00
0.70
0.12
11

D Interface lab

Product UI that stays calm.

Functional motion: under 250 ms, no bounce, never blocking input.

flip · animate · functional tokens

Release queue

  • P3Docs: platform profiles
  • P1Pin: overflow ancestor warning
  • P2Scene: context-loss recovery
  • P1Split text: grapheme safety
  • P4Tokens: dark theme set

Package weight

gzip KB, unminified dist

Select a bar

Install composer

real commands

What do you need?

E Effects lab

Texture without assets.

No images on this page. Everything you see here is generated in code and turns static when you ask for less motion.

imageReveal · flowField · scramble · drawPath

imageReveal + flowField — scrubbed by your scroll

scramble — hover, focus or press

drawPath — the lattice, plotted when it enters view

F Physics lab

Throw the snow.

Real rigid bodies: crystals fall, stack and collide. Drag to throw, tap to drop another, Space adds one, arrows shake the box. The engine loads only when you ask for it — and stops computing the moment the pile settles.

Rapier (WASM) · stepPhysics · soundCues

Loads Rapier · ≈ 1.3 MB gzip · on demand

System

Adopt one piece. Or the whole lattice.

Dependencies never point upward. Select a package to see exactly what it brings with it.

Agent

Adapters

Capabilities

Foundation

Start

From curiosity to commit.

  1. Discover

    You are here.

    The benches above and the studio site around them — all built with the toolkit, in the open.

    See how this site is built

  2. Install

    Give your agent the skill.

    Claude Code
    git clone https://github.com/snowbros-labs/creative-engineering
cp -r creative-engineering/skills/snowbros-creative ~/.claude/skills/
    Libraries
    npm install @snowbros/core @snowbros/motion

  3. Integrate

    Start from the project you have.

    The skill inspects your stack first and works with what is already there — GSAP, Motion, R3F, your design system. Ask it:

    /snowbros-creative audit the motion on this page and fix the worst three issues

  4. Contribute

    Make the lattice bigger.

    Patterns, platform guides, adapters and fixes are welcome. Everything is dual-licensed MIT or Apache-2.0.

    Contributing guide · Issues

Want this in your product?

We build with these tools for clients, and we keep them open for everyone else.

snowbros2107@gmail.com