Glin UI
Radix UIBase UI
Primitive / Atombeta

Reveal

Scroll-triggered entrance with fade, slide, blur and scale variants, driven by a pluggable animation engine (css, motion or gsap).

Edit on GitHub

Welcome back, Priya

You have 3 reviews waiting and one deploy in progress.

Installation

Install from
pnpm dlx @glinui/cli@latest add reveal

Prefer the package?

Usage

Motion engine

Revealed when it scrolls into view.
// pnpm add motion (separate dependency, optional)
// Once at your app entry:
import "@glinui/motion/register/motion"



import { Reveal } from "@glinui/ui"



export function Demo() {
  return (
    <Reveal engine="motion" variant="blur-slide" className="rounded-card border border-line-soft bg-surface-1 p-4">
      Revealed when it scrolls into view.
    </Reveal>
  )
}

GSAP engine

Revealed when it scrolls into view.
// pnpm add gsap (separate dependency under GreenSock's own license, not bundled by GLINUI)
// Once at your app entry:
import "@glinui/motion/register/gsap"



import { Reveal } from "@glinui/ui"



export function Demo() {
  return (
    <Reveal engine="gsap" variant="blur-slide" className="rounded-card border border-line-soft bg-surface-1 p-4">
      Revealed when it scrolls into view.
    </Reveal>
  )
}

Static (animations off)

Revealed when it scrolls into view.
import { Reveal } from "@glinui/ui"



export function Demo() {
  return (
    <Reveal motion="none" variant="blur-slide" className="rounded-card border border-line-soft bg-surface-1 p-4">
      Revealed when it scrolls into view.
    </Reveal>
  )
}

Accessibility

  • Content is in the DOM and visible to assistive tech before and after the animation.
  • Animation never gates meaning: the static state is identical to the final animated state.

Reduced Motion

Under prefers-reduced-motion the engine drops travel, blur and scale and only fades opacity. motion="none" renders the final state immediately and never loads an animation library.

Affected properties

opacitytransformfilter

API Reference

PropTypeRequiredDefaultDescription
asRevealTagNo"div"Element to render.
variantRevealVariantNo"slide"Visual treatment of the reveal.
directionRevealDirectionNo"up"Direction the content travels in.
distancenumberNo16Travel distance in px for slide variants.
duration / delaynumber--Milliseconds. Duration defaults to 520 or the spring settling time.
springSpringInputNo-Spring preset name or custom physics. Uses real physics on the motion and gsap engines.
oncebooleanNotrueOnly animate the first time it enters the viewport.
thresholdnumberNo0.15Visible fraction required to trigger.
immediatebooleanNofalsePlay on mount instead of waiting for the viewport.
engineEngineNameNo"css"Animation engine. css is built in with zero dependencies; motion and gsap are opt-in (import "@glinui/motion/register/<name>" and install the package). Falls back to MotionEngineProvider, then data-glin-engine on <html>, then css.
motionMotionLevelNo"system"none renders the final state with no animation, subtle animates opacity only, system follows prefers-reduced-motion.
childrenReact.ReactNodeNo-Auto-generated from TypeScript source.
delaynumberNo-Delay in ms.
durationnumberNo-Duration in ms. Defaults to the engine default (520).

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Reveal } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui@glinui/motion

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/reveal.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

RevealProps

EngineControlProps

PropTypeRequiredDefaultDescription
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.

RevealProps

PropTypeRequiredDefaultDescription
asRevealTagNo"div"-
childrenReact.ReactNodeNo--
delaynumberNo-Delay in ms.
directionRevealDirectionNo-Direction the content travels in. Default `up`.
distancenumberNo-Travel distance in px for slide variants.
durationnumberNo-Duration in ms. Defaults to the engine default (520).
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
immediatebooleanNofalsePlay on mount instead of waiting for the viewport.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
oncebooleanNotrueAnimate only the first time it enters the viewport. Default true.
springSpringInputNo--
thresholdnumberNo-Visible fraction (0 to 1) required to trigger. Default 0.15.
variantRevealVariantNo"slide"-