How do I install the Reveal pattern?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { Reveal }. Copy-paste distribution is also supported.

Is the Reveal pattern free to use?

Yes. Reveal ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Reveal page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Reveal

MotionMIT

View in Storybook

Scroll-triggered reveal animation primitive for content-rich pages.

bun add @otfdashkit/ui

Preview

RevealMotion

Loading Storybook preview…

Code

@otfdashkit/ui

import { Reveal } from '@otfdashkit/ui'

export function Example() {
  return (
    <Reveal>
      <div className="rounded-lg border border-border bg-card p-6">
        <p className="text-foreground">Revealed on scroll into view</p>
      </div>
    </Reveal>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the Reveal source. Inherited HTML attributes are not listed.

Prop	Type	Default
childrenrequired	ReactNode
className	string
delay	number	0
once	boolean	true
preset	MotionPreset	'fadeIn'

Preview

Code

Props

Related