Skip to content
New

Motion

Components whose motion is the point. They read the village's motion: its durations, its spring, how far things travel and how intense the effects may be. Switch the village above and the same component moves differently, with no prop changed.

One reveal, four villages

The same three items, revealed one after another. Each village sets its motion in its recipe.

Konoha · calm

Smooth ease-out, a short rise, a light spring.

  • Design
  • Build
  • Ship
Kiri · gentle

Slower and floaty, a longer rise.

  • Design
  • Build
  • Ship
Iwa · quick

Exact: fades in place, no travel, no overshoot.

  • Design
  • Build
  • Ship
Kusa · bouncy

Springs that overshoot: things drop into place.

  • Design
  • Build
  • Ship

Set up motion once

Motion components bring rasengan-motion with them. Put its head script in your template, so the page knows before its first paint whether to animate, and its provider around the app.

import { MotionProvider, MotionScript } from "@/lib/motion";

// In <head>: sets <html data-motion> to ready, final or off before the first paint.
<MotionScript />

// Around the app, once.
<MotionProvider>{children}</MotionProvider>

Components

  • Move the pointer here, over the buttons and the field.

    Cursor

    A custom cursor that follows on the village's spring, wraps itself around buttons and links, and shows labels.

  • Gallery 3D

    Images or cards in 3D (coverflow, ring, helix, sphere, stack, grid), moving between layouts, with drag, keys and a detail view.

  • LumenNorthwindAcmeGlobexInitechUmbrellaHooliStark
    Marquee

    An endless loop of logos, quotes or tags at a steady speed, with a pause button and only the copies it needs.

  • Sites shipped
    12,480
    Uptime
    99.97%
    Raised
    $4.2M
    Number Roll

    A number whose digits roll to their value, formatted for any locale: counters, prices, live stats.

  • Ship before lunch

    A landing page your village dresses: one attribute, another look.

    Page Transition

    A curtain between pages or states (wipe, blinds, iris, fade) that works with any router and moves focus to the new heading.

  • Access granted

    Decrypting your village tokens

    Scramble Text

    Text that decodes itself from random glyphs, letter after letter: on view, on hover, or when it changes.

  • Ship the landing page before lunch

    Every section moves the way your village does: quick and exact, soft and floaty, or bouncy.

    Text Reveal

    A heading or a paragraph that appears word by word, letter by letter or line by line, timed by the village's motion.

  • Hello. I write your landing page, then I ship it.

    Typewriter

    Text typed with a natural rhythm, pausing after commas and full stops; several strings typed and deleted in turn.