Glass Profile
AI Pass+card#profile
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Card component
About Glass Profile
A glassmorphism profile card — a full-bleed portrait is the surface and a translucent dark scrim panel carries the name, verified badge, bio, highlight stats, and compact CTAs, with a photo-to-initials fallback.
Features
- Full-bleed portrait surface with a translucent dark scrim panel (glassmorphism via
backdrop-filter: blur) reading over the lower photo - Photo-to-initials fallback — a warm gradient with monogram initials shows when the image fails to load
- Identity block with the name and an azure verified rosette over the glass
- Highlight row with a star-rated Review value plus Revenue and Rate figures
- Compact "Get In Touch" CTA and bookmark button set in the display typeface
- Skeleton-loading entrance state with a transform-based shimmer
- Responsive layout down to 280px, honoring
prefers-reduced-motion
Accessibility
- ARIA labels
- All interactive elements have
aria-labelor visible text - Bookmark button
<button>witharia-pressedreflecting saved state- Focus indicators
:focus-visiblewith--ringoutline on all elements- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Glass Profile in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the card is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Timeline Cards
VanillaReact
A project milestone timeline — the journey from idea to launch down a clean vertical rail with status nodes, annotated by cards with mono metric readings, teammate avatars, live status words, and expandable task checklists.
#card#timeline#progress
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
Timeline
VanillaReact
A dev-tool release timeline as a clean versions panel — each release leads with a tinted action chip on a neutral connector rail, a mixed-weight activity line, and a muted timestamp. Mono diffstats and hashes, an accent-tinted active pill with a canary meter, and a dashed planned-release stub.
#card#timeline
Schedule Timeline
VanillaReact
A printed schedule-for-today card — a sharp-cornered panel with hard offset shadows and a vertical rail threading diamond status nodes past tinted patient avatars, condition chips, and monospace time blocks, with a NOW divider. Tap a row to check it off.
#card#timeline#avatar
Card Stack Hover
ReactVanilla
An accessible stack of tactile field-note cards: on wide screens it fans out with a springy overshoot on hover or focus; on narrow screens tapping deals the front card away and cycles the deck. Selection and keyboard traversal work in both modes.
#card#keyboard#stack
Order Tracker
VanillaReact
An order tracking card with a vertical delivery timeline — a truck marker rides the rail from Order placed to Delivered, every row keeps a fixed two-line height so the card never shifts, an incomplete address halts the run until you confirm it, and a status pill plus a mono ETA follow along.
#card
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
