Full-bleed hero
A full-bleed hero with ratings and a glowing call to action that changes with the plan.
Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.
Works with
What it does
Consumer apps that sell weekly + yearly need a paywall that feels like an ad, not a settings page. The photo covers the top two thirds and fades into black; the content sits over it with a rating badge ("4.9 ★★★★★ 25K ratings" between laurels), headline, subtitle and a checklist. Plan rows are dark glass; when a weekly plan is on offer, comparisons switch to per-week ("3-day free trial · $0.77/wk", "SAVE 89%"), otherwise per-month. The selected row gets a gradient border whose colors travel around it; the CTA is a gradient capsule with a light sweep and a breathing glow.
Motion: Ken Burns zoom, a colored light leak drifting over the photo (screen blend), optional particles (.embers rising in the gradient color, .snow, .stars), staggered entrances. Reduce Motion freezes it all.
What you get
- ✓431 lines of source code, ready to paste
- ✓Architecture
- ✓Dependencies
- ✓Implementation
- ✓Usage
- ✓Integration Checklist
- ✓Common Customizations
- ✓Known Pitfalls