Mobile Profile Page
One line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.
We made two examples: a violet maker profile for Vibary, and a moss-and-lime climber's card for a bouldering gym. Both share the phone frame and notch, the identity sitting over the header's fade, the three glass stat cards, the feature card and the clipped card at the bottom.
You get a single index.html file with one mobile screen inside a phone frame. The name, subtitle, three stat cards and feature card come from your fields; the figures are sample data for you to replace. The header and backdrop are drawn from your accent colour, so their light lands a little differently each time. The frame, the notch, the glass cards and the last card clipped at the bottom to hint at scrolling always stay.
Generated for this library
Input
Brief a maker profile screen for a Vibary designer
Identity Vibary Maker · vibe coding in the browser
Stats 24 · screens shipped / 9 · skills used / 6 · day streak
Feature Latest · One-Breath Hero · opened 12 times
Palette --ground #0a0a0b · --card rgba(255,255,255,.06) ·
--ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · phone frame on a drawn ground
frame tall rounded phone, hairline inner ring, soft shadow,
a centred notch; screen clipped to its inner radius
header a soft accent light drawn in CSS, fading to the ground
identity name and subtitle lifted over the header's lower edge
stats three glass cards in a row, figure over label
feature one wider glass card: label, title, a line of meta,
a drawn glyph at the right
tease a last glass card clipped by the bottom — more below
entrance header settles, then name → subtitle → stats → feature
→ tease rise in turn; reduced motion drops the travelYou fill in 5 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The identity
- 3The stat trio
- 4The feature card
- 5The palette (one :root block)
Mobile Profile Page
What this makes
One line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the five slot lines — the identity and the stat trio carry the screen; the palette sets warm or cool.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser — the phone frame renders on any background, ready to screenshot.
- Make the next screen by swapping the identity and figures and keeping the frame — the phone stays, the person changes.
What you swap
- The brief (one line)
- a maker profile screen for a Vibary designer
- The identity
- name: Vibary Maker · subtitle: vibe coding in the browser
- The stat trio
- 24 · screens shipped / 9 · skills used / 6 · day streak
- The feature card
- label: Latest · title: One-Breath Hero · meta: opened 12 times
- The palette (one :root block)
- --ground #0a0a0b · --card rgba(255,255,255,.06) · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- A screen that belongs on a phone — one person or one summary, not a dashboard folded down to thumb width.
- Three stats worth showing; a grid with one real figure and two guesses reads as a placeholder.
- A palette of five values, warm or cool — the media header and the glass are drawn from them, so a half-chosen palette reads as a half-drawn screen.
When to reach for it
When you want to show a mobile screen, not describe one — a profile, a summary, a small app view — framed in a phone and ready to drop into a slide or a landing. The phone, the glass and the entrance are fixed; the person and the figures are yours.
What changes
- A single index.html with no build step and no outside request: one phone-shaped screen centred on a drawn backdrop.
- A media header at the top, drawn in CSS — a soft moving light, never a hosted photo or video — with the identity block riding up over its lower edge.
- A row of glass stat cards and one wider feature card, all cut from the same frosted material, over a warm or cool ground of your choosing.
- A last card sits half in view under the fold, so the screen reads as scrollable rather than complete.
- One entrance: the header settles, then the name, the stats and the cards rise in turn; with reduced motion the travel is dropped and the screen arrives composed.
Pairs with
- 404 Error PageOne line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
- Count-Up StatsOne line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
- One-File Landing PageOne brief in, one self-contained index.html out: a whole landing page in a single file — a scroll-aware nav, a hero, a highlighted statement, a feature grid, a closing call and a footer, every section rising as it comes into view.