Gradual card
Square portrait card with a bottom glass band, TV noise overlay, and optional X-style gold verified badge on the title.
Preview & code
GFA Studio CLI · Coming soon
gokhanf4
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/gradual-card.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/gradual-card.json (or copy from this repo: apps/web/src/blocks/gfa/gradual-card.tsx).
- Place it in your project (for example: ./src/blocks/gfa/gradual-card.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
- The Studio JSON includes gradual-card.tsx, gradual-card-tv-noise.tsx, gradual-card-protected-image.tsx, and twitter-gold-verified-badge.tsx — keep those paths and imports together.
- Copy gfa-gradual-card-portrait.png into public/media/gradual-card/ (or point imageSrc / data-image-src at your own asset).
Dependencies
Uses next/image (protected fill image), client TV noise (requestAnimationFrame with reduced-motion respect), and TwitterGoldVerifiedBadge (inline SVG gradients). No Motion. Client-only helpers ship as sibling files in src/blocks/gfa/.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Title rendered over the image inside the glass band. |
| goldVerified | boolean | false | When true, shows the inline gold verified SVG beside the title. |
| imageSrc | string | /media/gradual-card/gfa-gradual-card-portrait.png | Path under public/ or absolute URL passed to next/image. |
| imageAlt | string | — | Accessible description for the portrait. |
| className | string | — | Optional classes on the outer article wrapper (e.g. layout spacing). |