ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Pumpkin Reveal, animated React component

Trick or treat with a real 3D jack-o'-lantern hanging from a dead branch. It turns on its rope, every hit grows glowing cracks where you struck it, and the third splits it along its ribs into curved shell pieces, orange outside and pale inside. A ghost escapes and three candies spill out: pick one, and one of them is a trick. The sounds are synthesised, off until the visitor switches them on, and an optional track can play as it bursts.

  • Free
  • For Fun
  • 3D
  • Spring

Off until you press the speaker button in the card. Then wind and a low drone play, each hit thuds with a creak, a ghost wails as it bursts (or your own track plays), and the candies chime and pop. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Trick or treatSomething wicked is inside

Smash the pumpkin three times, or press Space.

Props

PropTypeDefaultWhat it does
autoplaybooleanfalsePlays itself with a ghost pointer until the visitor touches the card. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
musicstring—URL of a track to play when the pumpkin bursts. Without one, a ghost wails instead.
classNamestring—Extra classes for the outer card.
enableSoundbooleantruePlays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  3. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/pumpkin-reveal
  4. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    pumpkin-reveal/
    index.ts
    pumpkin-reveal.tsx
  5. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  6. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { PumpkinReveal } from "@/components/pumpkin-reveal";

export default function Page() {
  return (
    <main>
      <PumpkinReveal />
    </main>
  );
}

Pumpkin Reveal questions

Does it make sound, and how do I turn it off?

Off until you press the speaker button in the card. Then wind and a low drone play, each hit thuds with a creak, a ghost wails as it bursts (or your own track plays), and the candies chime and pop. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More for fun