Free-trial timeline
A free-trial timeline that shows today, the reminder day and the charge date.
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
Trial paywalls convert best — and get rejected least — when they say plainly when the user will be charged. This template turns a single plan with a free trial into a three-step timeline that can't drift from the real offer: Today (full access, free), Day N−2 (reminder before the trial ends), Day N · date (you'll be charged $X; cancel before to pay nothing). Steps, the charge date and the headline ("7 days free, then $59.99/year") are computed from plan.offer and plan.displayPrice. Without a trial it falls back to Today / Every year / Anytime cancel steps, or you pass your own steps.
Dark theme with motion: aurora glow and stars behind, a floating icon tile with a periodic shine, timeline nodes popping in one by one while the connectors fill downward, a pulsing ring on "Today", and a glowing white CTA. Everything is static under Reduce Motion.
What you get
- ✓438 lines of source code, ready to paste
- ✓Architecture
- ✓Dependencies
- ✓Implementation
- ✓Usage
- ✓Integration Checklist
- ✓Common Customizations
- ✓Known Pitfalls