Live Docs

Navigation

Effects & Media /

new

Animations

CSS-only motion utilities: one-shot entrances, hover affordances, and scroll-reveal selectors. Reduced-motion safe.

import "@naraya-ai/ui/animations";

Entrance

Run-once on mount

Add a class; delay with --naraya-anim-delay. Hit Replay to re-trigger.

fade-in
slide-up
slide-down
slide-left
slide-right
scale-in
blur-in
<div className="naraya-animate-slide-up">…</div>

{/* stagger with a delay */}
<div className="naraya-animate-fade-in" style={{ ["--naraya-anim-delay"]: "120ms" }}>…</div>

Hover

Hover the chips

hover-lift
hover-scale
hover-glow
hover-brighten
hover-tilt
hover-rotate
<div className="naraya-hover-lift">…</div>
<div className="naraya-hover-tilt">…</div>
<div className="naraya-hover-rotate">…</div>

Tune the speed

Add a preset speed modifier — no inline style. (--fast / --base / --slow / --slower.) Use the CSS var only for an arbitrary value.

fast
slow
slower
{/* preset modifier — recommended */}
<div className="naraya-hover-lift naraya-hover--slower">…</div>

{/* arbitrary value — escape hatch */}
<div className="naraya-hover-lift" style={{ "--naraya-hover-duration": "450ms" }}>…</div>

Tilt angle

Override --naraya-tilt-x / --naraya-tilt-y for a stronger tilt.

default
big tilt
<div className="naraya-hover-tilt" style={{ "--naraya-tilt-x": "12deg", "--naraya-tilt-y": "-16deg" }}>…</div>

Rotate angle

Override --naraya-rotate (deg) for a stronger spin.

3° (default)
-8°
<div className="naraya-hover-rotate" style={{ "--naraya-rotate": "-8deg" }}>…</div>

Scroll reveal

The [data-naraya-reveal] selectors are driven by the <Reveal> component — it toggles data-visible when the element scrolls into view.

Classes

PropTypeDefaultDescription
.naraya-animate-fade-inentrance—Fade in (and -slide-up/-down/-left/-right, -scale-in, -blur-in).
.naraya-hover-lifthover—Lift on hover (and -scale, -glow, -brighten, -tilt, -rotate). No will-change.
[data-naraya-reveal]selector—Reveal target; driven by <Reveal> via data-state (pre/in/out).
--naraya-anim-delayvar—Delay applied to entrance + reveal transitions.
.naraya-hover--fast/base/slow/slowermodifier—Preset hover speed (no inline style).
--naraya-hover-durationvar—Arbitrary hover speed (escape hatch; default --duration-slow).
--naraya-tilt-x / -yvar—Override hover-tilt rotation angles (deg).
--naraya-rotatevar—Override hover-rotate angle (deg).

Reduced motion

Under prefers-reduced-motion: reduce the tokens layer collapses animation/transition durations, and reveal targets are forced fully visible — content is never left hidden.

Tokens Used

--duration-base / --duration-slow

Timing

--easing-smooth

Default curve

--shadow-glow

hover-glow