Components
Event Card
Event Card
An interactive, animated event timeline card displaying daily schedules with hover-triggered time slot transitions.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Solana Meet: BLR
8:30–11PM
UX Testing Slot
5:30–8:30PM
Event Timeline
Visualize and navigate your daily flow with beautifully animated, color-coded time blocks.
*Hover to animate
Installation
1
Install the packages
npm i motion clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
event-card.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| firstEvent | string | "Solana Meet: BLR" | Title of the first event shown in the timeline. |
| firstEventTime | string | "8:30–11PM" | Time range for the first event. |
| secondEvent | string | "UX Testing Slot" | Title of the second event shown in the timeline. |
| secondEventTime | string | "5:30–8:30PM" | Time range for the second event. |
| cardTitle | string | "Event Timeline" | Title displayed below the timeline card. |
| cardDescription | string | "Visualize and navigate your daily flow with beautifully animated, color-coded time blocks." | Short description displayed below the card title. |