Evidence Board

(The Source Code will not be given, only the component is the deliverable)

Transform your content into a compelling detective story with the Evidence Board component. This immersive React component recreates the classic crime investigation aesthetic, complete with pinned evidence cards connected by red strings on a textured cork board background.

Key Features:

Visual Design

• Authentic detective board aesthetic with pinned cards and connecting strings

• Customizable texture overlay for realistic cork board appearance

• Cards displayed in alternating left-right pattern with natural rotation angles

• Red pushpin graphics at the top of each card

• Professional color theming for cards, text, background, and connection lines

Interactive Elements

• Smooth scroll-triggered reveal animations that bring cards into view progressively

• Hover effects that highlight cards and their connections

• Click to expand cards into detailed case file modals

• "Confidential" stamp overlay on modal views

• Keyboard navigation support (Escape to close modals)

Customization Options

• Adjustable card width, modal width, and vertical spacing between items

• Configurable padding for layout control

• Line color and opacity controls for connection strings

• Texture intensity adjustment

• Custom stamp text (default: "Confidential")

Accessibility & Semantic HTML

• Configurable HTML tags for all text elements (headings, paragraphs, divs)

• Alt text support for evidence images

• Proper ARIA labels for screen readers

• Semantic structure for improved SEO

Typography Controls

• Extended font controls for card titles and descriptions

• Separate styling for modal content

• Custom stamp font styling

• Full control over font size, weight, and line height

Content Management

• Simple array-based content structure

• Support for title, description, and image per evidence item

• Alt text fields for accessibility compliance

Animation & Performance

• Framer Motion powered smooth animations

• Spring-based physics for natural card movements

• Optimized position tracking for connection lines

• Responsive ResizeObserver implementation

Perfect For:

• True crime podcasts and documentary websites

• Mystery novel promotional pages

• Case study presentations with narrative flow

• Timeline storytelling for investigations or research

• Corporate presentations requiring a unique visual approach

• Educational content about detective work or forensics

• Event recaps with a mystery theme

Technical Implementation: Built with React, Framer Motion, and Framer's property controls system. Features automatic layout calculation, dynamic connection line rendering via SVG, and sophisticated scroll-based reveal logic. Fully responsive and optimized for both desktop and mobile viewing.

Whether you're telling a mystery story, presenting a case study, or creating an engaging timeline, the Evidence Board component delivers a memorable and interactive experience that keeps users engaged from the first clue to the final reveal.