Verdict Reveal

A dramatic court/judicial gavel impact animation. A realistic vector SVG gavel lifts, swings, and strikes the sound base block with a heavy impact shake and shockwave. Upon strike, the gavel and base split apart vertically, drawing open a shutter mask to reveal any ReactNode payload between them.

Preparing Gavel Reveal...

Courtroom Presets

Preview Payload

Payload Type

Gavel & Base Settings

Gavel Side

Aesthetic Theme

Gavel Scale1.00x

Impact Shake

Alignment Grid

Timing Controls

Animation Speed1.0x

Required Dependencies

npm install gsap @gsap/react react-icons

Architecture & Setup

Copy these files into your codebase matching the structure below: 📁 src/ ├── 📁 css/ │ └── 📁 verdict-reveal/ │ └── 📄 variables.css ├── 📁 types/ │ └── 📄 verdict-reveal.types.ts ├── 📁 constants/ │ └── 📄 verdict-reveal.constants.ts ├── 📁 hooks/ │ └── 📁 gsap/ │ └── 📁 verdict-reveal/ │ ├── 📄 index.ts │ └── 📄 useVerdictRevealAnimation.ts └── 📁 components/ └── 📁 verdict-reveal/ ├── 📄 VerdictReveal.tsx ├── 📄 VerdictRevealLoader.tsx ├── 📄 GavelHammer.tsx ├── 📄 GavelBase.tsx └── 📁 preview/ ├── 📄 index.tsx ├── 📄 Controls.tsx └── 📄 Presets.tsx