A light creator profile with a drifting gradient cover, an avatar inside a segmented story ring and a subscribe toggle. Channel stats switch between 7, 30 and 90 days with rolling numbers and redrawn sparklines, above pinned videos.
@noorbuilds
Furniture maker and teacher. New build videos every Thursday, workshop streams on Sundays, plans and cut lists for members.
npx shadcn@latest add https://hyperblur.dev/r/profile-creator-stats.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-creator-stats.tsx.
import { ProfileCreatorStats } from "@/components/hyperblur/profile-creator-stats"
<ProfileCreatorStats onSubscribeChange={(on) => console.log(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Noor Lindgren" | Display name. Also gives the avatar initials. |
| handle | string | "@noorbuilds" | Handle under the name. |
| bio | string | Short bio. | |
| location | string | "Gothenburg, Sweden" | Location chip. |
| website | { label: string; href: string } | { label: "noorbuilds.studio", href: "#" } | Website link. |
| segments | number | 6 | Segments of the story ring. |
| seenSegments | number | 2 | Segments drawn as already seen. |
| stats | { label: string; values: Record<"7d" | "30d" | "90d", string>; deltas: Record<...,number>; series: Record<..., number[]> }[] | 4 stats | Stat cards per period. |
| posts | { title: string; meta: string; duration: string; hue: number }[] | 3 posts | Pinned videos. hue tints the thumbnail. |
| defaultPeriod | "7d" | "30d" | "90d" | "30d" | Period selected first. |
| subscribers | number | 184200 | Count on the subscribe button. |
| defaultSubscribed | boolean | false | Initial subscribe state. |
| onSubscribeChange | (subscribed: boolean) => void | Called when subscribe is toggled. | |
| onMessage | () => void | Called by the message button. | |
| accent | string | "#e11d74" | Ring, badge and sparkline color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |