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.

(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.

Evidence Board – Detective-Style Timelin