Start a free trial
Each tick of the clock fills the next day of a seven-day trial.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/free-trial.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- a seven-day trial shows its first three days used.
- each tick of the clock fills the next day, and the ring moves on.
- a new week clears the days, and they fill again from day one.
Where it fits
For any product with a free trial: the empty dashboard before the trial starts, the onboarding screen that asks for a first step, or the section of a pricing page on how the trial works. The days filling one tick at a time show how long the trial lasts and how much of it is left, without a countdown in red. As a spot it fits above the heading and the Start free trial button of an empty screen. It is free to copy and pairs with Choose a plan, Add your first website and Plan upgrade.
Pairs well with Choose a plan, Add your first website and Plan upgrade.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 3 KB gzipped
- Motion
- Plays once, 4.5 s, then holds
- Reduced motion
- Shows a still
- File
- free-trial.svg
