Evidence Desk
A detective's desk in the dark: scroll to click on the lamp and glide from clue to clue: file, photos, red-string map, fingerprint, note.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Moonlight falls through venetian blinds until the lamp flickers on. The camera then eases from exhibit to exhibit, dwelling on each, while a typed card tells your story. Swap the clues for features, case studies or a product launch.
Installation
$ npx shadcn@latest add https://guetix.com/r/evidence-desk.json
Uses the shadcn CLI. It creates components/guetix/evidence-desk.tsx and installs nothing else.
Usage
example.tsx
import { EvidenceDesk } from "@/components/guetix/evidence-desk";
export default function Example() {
return <EvidenceDesk />;
}
Case-study storytellingMystery / true-crime siteProduct launch teaserEscape-room or game promo
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The whole desk is one 1600×1000 scene; the camera is a single transform eased toward scroll-driven stations, so it's smooth at 60 fps.
- 02Stations dwell: the camera only travels in the middle 60% of each step, so every clue holds still while you read.
- 03Everything is drawn in CSS/SVG (Polaroids, map, magnifier with an enlarged print inside the lens, cut-out letters). No images.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| clues | { exhibit?: string; title: string; body?: string }[] | — | One per station (overview, file, photos, map, print, note). |
| caseName | string | "CASE № 1947" | Title on the case file. |
| mode | "contained" | "page" | "contained" | Scroll inside its own box, or use window scroll with a sticky scene. |
| animated | boolean | true | false = no easing or flicker. |
Accessibility
- The desk art is decorative; every clue is real text (screen readers read each step).
- The scroll area is focusable for keyboard scrolling.
- Reduced motion: the camera jumps without easing.