component / motion

Reveal Motion

A composable load-in reveal with optional stagger delay.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

reveal motionReduced-motion safe

INSTALL / SOURCE REGISTRY

Add Reveal Motion to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/reveal-motion.json

registry/default/recipes/reveal-motion.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export function Reveal({ children, delay = 0, className, style, ...props }: React.HTMLAttributes<HTMLDivElement> & { delay?: number }) { return <div className={cn("dos-reveal", className)} style={{ animationDelay: `${delay}ms`, ...style }} {...props}>{children}</div> }

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy