We use anonymous analytics to improve VanillaSky. No personal data is collected. Learn more

    Libs — the vocabulary under the templates

    4 shared libs — the vocabulary every template and custom scene resolves to. Curves, text fitting, and the brand tokens. Install any of them into your own project; each ships with its source.

    Shared libs

    The vocabulary everything else resolves to — curves, text fitting, brand tokens. Read these instead of reinventing values.

    Animation Utilsanimation-utils

    Core motion vocabulary — interpolate, spring, Easing (incl. Easing.bezier), the SPRING_* presets, stagger, cubicBezier. Every custom scene's curves resolve to these; do not reinvent values.

    EASE.outExpo
    EASE.outBack
    EASE.inOutCubic
    EASE.anticipate
    EASE.pop
    EASE.editorial
    SPRING_SMOOTH · peak 1.00
    SPRING_SNAPPY · peak 1.11
    SPRING_CRISP · peak 1.25
    SPRING_BOUNCY · peak 1.28

    Sampled from the real functions. Easings run the full 0→1; springs are windowed to the first 30% because that is where they move — all four have settled by roughly t=0.2. Only SPRING_SMOOTH arrives without overshoot; the peak on each plot is how far past 1 it travels before settling.

    Text Utilstext-utils

    Text measurement and fitting helpers — notably fitTextSize(text, baseSize, maxWidth) for shrink-to-fit copy in fixed-width containers.

    Ship it
    26.0px
    You're the best. Google disagrees.
    13.9px
    If they can't find you, they choose your competitor.
    13.0px

    Same box, same base size — fitTextSize shrinks longer copy to fit. It stops at minScale (half the base size by default), so copy past that still overflows, as the third line shows. That floor is deliberate: shrinking further would produce text nobody can read at arm's length.

    Tokenstokens

    The canonical brand-token resolver: one derivation path from a config's style + brandKit to the resolved accent / surface / surface_elevated / content / muted / font / script_font tokens, plus fontStack(). Read tokens from here instead of hardcoding colors or font stacks.

    accent#22c55e
    secondary#c9922e
    surface#0a0a14
    surface_elevated#14141d
    content#ffffff
    muted#a7a6b0

    Resolved live from { accent: "#22c55e", secondary: "#c9922e" } — everything else is derived, which is why a scene should read tokens rather than hardcode hex.

    Motion Stdlibmotion-stdlib

    The higher-level motion vocabulary custom scenes compose with — phase, staggerWindow, punch, cascade, typewriter, countUp, particles, burst, glow, vignette, grain, drift, sweep, morph, orbit, pathDraw. These are already globals inside a custom_* scene; install this item when you want them in your own project.

    Shipittoday
    npx vanillasky r▌
    1,214
    42%

    cascade, typewriter, countUp and punch, each driven by the same 0→1 progress a scene gets.

    Using them

    Inside a custom scene you just reference a primitive by component name — nothing to install. To pull the source into your own React project, map the namespace once in components.json and add what you want.

    bash
    # in your own React project
npx shadcn add @vanillasky/countUpNumber   # a primitive
npx shadcn add @vanillasky/motion-stdlib   # the motion vocabulary

    Installing into your app does not change what the vanillasky CLI renders — to change a scene there, eject it as componentSource. See Templates & the registry.