SNOWBROSCreative Engineering
GitHub
Open source · MIT / Apache-2.0 v0.1

Design and engineering, played as one instrument.

An open-source AI skill and a toolkit of small, measured libraries for motion, scroll choreography, interactive 3D and product interfaces. The skill decides what a project needs. The libraries build it — and clean up after themselves.

Explore the labs Install
Six dimensions

  1. 01 / Skill

    Judgement, packaged.

    An agent skill that reads your project before touching it — framework, design system, existing libraries — then commits to a direction and the smallest change that achieves it.

    skills/snowbros-creative · detect-stack · audit-motion

  2. 02 / Motion

    One clock for every frame.

    Timelines, springs, scroll progress and sticky pinning share a single frame loop that sleeps when nothing moves. Every pattern ships a designed reduced-motion alternative.

    @snowbros/core · @snowbros/motion

  3. 03 / Interaction

    Controls that answer back.

    Magnetic targets, tilt, spotlight and spring feedback — with pointer, touch and keyboard treated as equals, never as afterthoughts.

    @snowbros/fx · springs from @snowbros/core

  4. 04 / Space

    3D that knows when to stop.

    Managed three.js stages render on demand, cap pixel ratio by device tier, fall back to SVG, and hand their GPU context back when they leave. This crystal is one.

    @snowbros/scene · three (optional peer)

  5. 05 / Effects

    Texture without assets.

    Procedural fields, masked reveals, scramble and path drawing — generated in code, so they scale, theme and respect preferences.

    @snowbros/fx

  6. 06 / Interface

    Calm where work happens.

    Functional motion for dashboards, tables and forms: short, interruptible, explaining what changed and nothing more. Adapters for React and Web Components.

    @snowbros/react · @snowbros/elements · @snowbros/tokens

Six dimensions, one lattice. Every arm is a package you can adopt on its own.

02 — Thesis

Most motion on the web is decoration. We build motion that explains — what changed, where it went, what to do next. One clock drives every frame. Native scroll stays native. Reduced motion is a design, not a switch. And nothing ships until it has been measured.

Causality
Every movement shows what caused it and where things went.
Frequency
The more often an action happens, the less it should move.
Interruptible
Nobody waits for an animation. Scroll, click and keys always win.
Measured
Budgets before visuals. Frame times, not adjectives.

03 — Labs

Working benches, not screenshots.

Every specimen below runs on the toolkit, in this page, right now. Change the parameters; the code changes with you.

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() The target leans toward a fine pointer within 80 px, then springs home. 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. The full SaaS demo lives in Toolkit Ops.

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

04 — 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

05 — Start

From curiosity to commit.

  1. 01 Discover

    You are here.

    The lattice above, the labs, the playground — all built with the toolkit, in the open.

    See how this site is built ↗

  2. 02 Understand

    Poke at real demos.

    A live pattern playground and a working SaaS control room, with keyboard, reduced motion and axe checks in CI.

    Playground · Toolkit Ops

  3. 03 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

  4. 04 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

  5. 05 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 ↗