Reveal

● LIVE

Throughput

SEC // 0x4A2

847req/s

12.4%

Latency

SEC // 0x4A3

38ms

3.1%

Uptime

SEC // 0x4A4

99.9%

0.2%

Sessions

SEC // 0x4A5

1.2K

4.8%

Traces

SEC // 0x4A6

12/hr

22%

Queue

SEC // 0x4A7

0jobs

"use client";import { Reveal } from "@/registry/okibi/ui/reveal";import { Readout } from "@/registry/okibi/ui/readout";export default function RevealDemo() {  return (    <Reveal className="grid w-full grid-cols-2 gap-4 sm:grid-cols-3">      <Readout className="h-full" label="Throughput" value="847" unit="req/s" delta={12.4} index="SEC // 0x4A2" />      <Readout className="h-full" label="Latency" value="38" unit="ms" delta={-3.1} index="SEC // 0x4A3" />      <Readout className="h-full" label="Uptime" value="99.9" unit="%" delta={0.2} index="SEC // 0x4A4" />      <Readout className="h-full" label="Sessions" value="1.2K" delta={4.8} index="SEC // 0x4A5" />      <Readout className="h-full" label="Traces" value="12" unit="/hr" delta={-22.0} index="SEC // 0x4A6" />      <Readout className="h-full" label="Queue" value="0" unit="jobs" delta={0} index="SEC // 0x4A7" />    </Reveal>  );}

npx shadcn@latest add https://okibi.cndr.dev/r/reveal.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/reveal.json

Install the required dependencies:

npm install motion

Copy the source from the Code tab above into components/ui/reveal.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { Reveal } from "@/components/ui/reveal"

<Reveal stagger={0.08}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</Reveal>

Examples

Stagger

Tune the inter-child delay with stagger to cascade a grid of items into view.

● LIVE

CH // 0x01

CH // 0x02

CH // 0x03

CH // 0x04

CH // 0x05

CH // 0x06

"use client";import { CoordLabel } from "@/registry/okibi/ui/coord-label";import { Reveal } from "@/registry/okibi/ui/reveal";const CELLS = [  "CH // 0x01",  "CH // 0x02",  "CH // 0x03",  "CH // 0x04",  "CH // 0x05",  "CH // 0x06",];export default function StaggerDemo() {  return (    <Reveal stagger={0.08} className="grid w-full max-w-md grid-cols-3 gap-3">      {CELLS.map((cell) => (        <div          key={cell}          className="flex items-center justify-center border border-border bg-card p-4"        >          <CoordLabel>{cell}</CoordLabel>        </div>      ))}    </Reveal>  );}

API Reference

Prop	Type	Default	Description
`stagger`	`number`	`0.06`	Seconds between each child's entrance.
`once`	`boolean`	`true`	Play once, or every time the group enters the viewport.

Accessibility

Purely a decorative entrance wrapper — it adds no role or landmark and is transparent to assistive tech.
Semantics are inherited entirely from the children, so list, grid, and heading structure is preserved.
Honors prefers-reduced-motion: children render in their final position with an identical wrapper and no animation.
Each child is wrapped in a min-w-0 h-full element, which affects direct-child and nth-child selectors in the parent grid or flex layout.

Guidelines

Wrap a grid or row of Cards, Readouts, or list items to bring a panel to life on scroll-in.
Tune stagger to pace the cascade; the default is 0.06 seconds between children.
Give reorderable or conditional children stable keys so entrances do not mis-associate.

Don't

Do not rely on it for meaning or focus order — it is decoration over content that must stand on its own.
Do not wrap a single block taller than the viewport, which may never reach the visibility threshold to reveal.
Do not nest layout-critical selectors that assume children are direct, since each is wrapped.

Reveal

On this page