Color Project Archive
A tactile, typography-driven project index with dynamic RGB background blending, mechanical ruler tape, draggable picture preview, and responsive Web Audio ticks.
Axel CurveCopenhagen[11 jun]
White StairLight Study[30 jun]
Fence LineDetail[14 jul]
Brutalist AscentArchitecture[28 jul]
Quiet CourtyardLandscape[12 aug]
Monochrome HourBlack & White[03 sep]
Blue PlasterFacade Study[04 mar]
Figure & WallEditorial[17 mar]
Blank CanvasMinimalism[02 apr]
Leather LoungeInterior[21 apr]
Glass GridUrban[09 may]
Repeat PatternTexture[26 may]
Axel CurveCopenhagen[11 jun]
View project↗
Installation
$ npx shadcn@latest add https://akshitr.com/r/color-project-archive.json
Props
ColorProjectArchiveProps
| Prop | Type | Default | Description |
|---|---|---|---|
projects | ColorProjectArchiveProject[] | Default sample list | Array of project records to display. |
infiniteScroll | boolean | true | Allows infinite circular continuous loop scrolling. |
showPreview | boolean | true | Enables the floating, draggable picture preview card. |
previewSize | "sm" | "md" | "lg" | "md" | Dimension size preset for the floating preview card. |
showRuler | boolean | true | Displays the millimeter-style gauge ruler tape on the left. |
activeAnchor | number | 0.68 | Vertical position ratio (0.0 to 1.0) where the active row aligns. |
rowLeading | number | 1.9 | Spacing height multiplier between adjacent rows. |
enableSound | boolean | true | Plays low-latency tick sound when passing each row. |
tickSrc | string | "/sounds/tick.wav" | Audio file URL for tick sound (with synthesized fallback). |
onActiveChange | (index: number, project: ColorProjectArchiveProject) => void | undefined | Callback fired when a new project reaches focus. |
onOpen | (project: ColorProjectArchiveProject, index: number) => void | undefined | Callback fired when the active project card is clicked. |
linkLabel | string | "View project" | Label text shown on the preview card's link badge. |
titleClassName | string | undefined | Custom CSS class to control main label font size, typography, etc. |
className | string | undefined | Additional CSS class names. |
ColorProjectArchiveProject
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier. |
name | string | Project name displayed in large typography. |
badge | string | Optional pill tag (e.g., "Architecture", "Editorial"). |
date | string | Optional date bracket text (e.g., "[28 jul]"). |
bgColor | string | Background color hex code interpolated dynamically. |
image | string | Cover image URL rendered on the preview card. |
href | string | Optional destination URL opened on click. |
target | "_blank" | "_self" | Window target for project link (_blank by default). |
Use Cases
- Design Studio & Agency Indexes: Present a signature client portfolio index with bold typography, continuous wheel scrolling, and dynamic ambient color shifts.
- Photography & Editorial Lookbooks: Let visitors scrub through curated issues or shoots with tactile sound feedback, responsive ruler calibration, and instant visual previews.
- Creative Portfolio Work Archives: Transform standard flat project lists into an interactive, mechanical exploration experience that highlights dates, categories, and full case study links.
- Component & Experiment Showcases: Showcase UI libraries, generative design labs, or product releases with a tactile index view that invites playful scrubbing and direct link navigation.
