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