That's a great foundation. Once you already have a 3D corkboard with draggable evidence cards and Verlet-string connections, I'd extend it by treating the board as a graph plus a timeline, rather than just a collection of objects.
Here are some features that work particularly well together.
1. Typed evidence links
Instead of every string meaning the same thing, make links semantic.
type LinkType =
| "suspected"
| "confirmed"
| "financial"
| "phone"
| "location"
| "dna"
| "timeline"
| "contradiction";
interface EvidenceLink {
from: string;
to: string;
type: LinkType;
confidence: number;
notes: string;
}
Then render each differently:
- 🔴 Confirmed → thick red rope
- 🟡 Suspected → yellow dashed rope
- 🔵 Phone calls → blue cable
- 🟢 Financial → green wire
- ⚪ Contradictions → broken rope
The rope physics stay identical—only the material changes.
2. Timeline mode
Give every evidence item optional timestamps.
interface Evidence {
id: string;
title: string;
date?: Date;
tags: string[];
position: THREE.Vector3;
}
Press T:
The board smoothly morphs into a chronological layout.
2004 ---------------------- 2006 ---------------------- 2008
Photo
Witness
Bank Record
Arrest
Use tweening so cards animate into place instead of teleporting.
3. Auto-generated relationship graph
Rather than manually connecting everything:
Shared suspect
↓
Create suggestion
Same address
↓
Create suggestion
Same phone number
↓
Create suggestion
Each suggestion appears as a glowing ghost string.
User clicks:
Accept
Reject
Ignore
This feels much smarter than forcing every connection manually.
4. Pin clusters
Real detectives group evidence.
[Warehouse]
Photo
Invoice
DNA
Witness
Draw a cork outline around the cluster.
Clusters can collapse into a single node.
Warehouse ▼
(contains 17 items)
Double-click expands.
5. Animated evidence flow
When selecting an item:
Witness
│
│
▼
Phone
│
▼
Account
│
▼
Warehouse
Animate a glowing pulse traveling down connected ropes.
Looks fantastic in Three.js.
6. Confidence visualization
Instead of just labels:
100% ██████████
70% ███████░░░
20% ██░░░░░░░░
Also affect visuals:
- opaque cards = verified
- translucent = uncertain
- rope thickness = confidence
- rope wobble = uncertainty
7. Timeline scrubber
At the bottom:
|----2003----2004----2005----2006----|
▲
Dragging it:
- hides future evidence
- fades inactive links
- animates discoveries appearing over time
This creates a "reconstruct the investigation" effect.
8. Search graph
Typing:
john
Highlights only:
John
↓
Phone
↓
Apartment
↓
Car
Everything else fades to 10% opacity.
9. Case notes
Each evidence card has markdown notes.
## Interview
Claims he was home.
Contradicted by phone records.
Render the first line as a preview.
Double-click opens a floating editor.
10. Evidence provenance
Instead of flat objects:
Evidence
↓
Source
↓
Officer
↓
Collection Date
↓
Chain of Custody
Hovering shows a miniature provenance tree.
11. Interactive rope editing
Grab a rope midpoint.
Drag it around pins.
The Verlet simulation naturally creates curves around obstacles, making the board feel tactile.
12. Investigation playback
Record every user action.
[
"created card",
"linked witness",
"moved photo",
"added note",
"confirmed DNA"
]
Replay the investigation with smooth animations, useful for demos or presentations.
13. Spatial layout forces
Use a lightweight force-directed layout to reduce clutter while preserving user intent.
- connected evidence gently attracts
- unrelated groups repel
- pinned items stay fixed
- ropes maintain tension through the Verlet simulation
This keeps the board readable even with hundreds of nodes.
14. Link inspector
Clicking a rope opens a side panel:
Connection
Witness
↓
Phone Records
Reason:
Same number found in call log
Confidence:
84%
Created:
June 4
Created By:
Auto-analysis
Treat links as first-class objects with their own metadata, not just visual lines.
15. "Detective mode"
Enable subtle environmental effects to increase immersion without affecting usability:
- slight camera sway
- desk lamp shadows
- paper edge curl shaders
- pushpin models
- dust particles
- rope tension sounds while dragging
- soft focus transitions when zooming
These touches can make the board feel like a physical workspace rather than a generic node editor.
A scalable architecture
As the project grows, a clean separation helps:
Data Layer
├── Evidence
├── Links
├── Timeline
├── Tags
└── Notes
Simulation Layer
├── Verlet ropes
├── Force layout
├── Collision
└── Animation
Rendering Layer
├── Cards
├── Pins
├── Labels
├── Rope materials
└── Timeline
Interaction Layer
├── Drag/drop
├── Link creation
├── Search
├── Playback
└── Selection
This architecture lets you add features like AI-assisted relationship suggestions, collaborative editing, or importing/exporting case files later without tightly coupling your simulation, rendering, and data logic.
