Motion/Code Reveal

Code RevealNew

Code backdrop that appears under the pointer, with a slower glow trailing behind.

Open in Claude Open in ChatGPT

import { Button } from "@/components/ui/button"

:root {

--primary: var(--blue-600);

--control-radius: 2px;

}

// move the pointer over this panel

export function Save() {

return <Button variant="ink">Save</Button>

}

import { Button } from "@/components/ui/button"

:root {

--primary: var(--blue-600);

--control-radius: 2px;

}

// move the pointer over this panel

export function Save() {

return <Button variant="ink">Save</Button>

}

Move your cursor

Installation

$npx shadcn@latest add @opendraft/code-reveal

Needs the @opendraft registry in your components.json. See Installation.

Dependencies

Source

The files the install command adds to your project. They're yours to edit.

PreviousMarquee Next Pixel Field