Daily Reward Calendar

A row of day tiles, one claim per real day. Rewards drawn from your weighted config before the animation.

Copied 0 times.

Daily rewards

Try it: tap today's tile. The reward is drawn by weight before it opens.

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a daily reward calendar promo for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A row of 7 day tiles (wrapping on narrow screens).
- Each tile has a day label and three states: locked (future days), claimable (today, visually highlighted), and opened (shows the reward that was actually drawn). Below the tiles, one result line.

ODDS AND HONESTY (non-negotiable)
- Rewards live in one config array: { label, prize code or value, weight }. When today's tile is claimed, the reward is drawn by WEIGHT first, BEFORE the open animation starts, and the animation reveals exactly that drawn reward. Never a fake near-miss, never swapping the outcome after the draw; forbid both in a comment as fraud.
- One claim per real calendar day per visitor: localStorage keyed by the date. Previously claimed days keep showing the reward they actually drew; future days cannot be opened.
- Empty config or zero total weight = the calendar does not render. A clearly marked TODO tells me to define real rewards, redemption, and to check prize-promotion legality in my market.

BEHAVIOR
- Claiming flips the tile immediately (150ms) to its opened face showing the drawn reward.
- After the reveal, the result line states the reward and how to redeem it, announced via aria-live="polite".

QUALITY
- Tiles are real buttons at least 48px, with aria-labels carrying the day and state; locked days use disabled semantics.
- prefers-reduced-motion: the reveal is instant, no shake or flip.
- WCAG AA contrast in all three states; fully responsive: tiles wrap to a second row on narrow screens, no horizontal overflow.

QUESTIONS
- Before you build, find or ask for: my real rewards with their weights and how each is redeemed. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The daily reward calendar gives visitors a reason to come back tomorrow: one tile to open per real day, with a prize behind it. Streaks are sticky, and this one plays it straight. Come back tomorrow is the hardest ask on the internet; a streak makes it easy.

The reward is drawn from your odds before the animation even starts; fake near-misses are banned as fraud.
One claim per real calendar day, remembered per visitor.
Tiles wear three clear looks: claimed, claimable today, and locked.
Yesterday's tile keeps showing what it actually gave; tomorrow's stays locked.
The winner sees the reward and how to redeem it, announced politely to screen readers too.
On narrow screens the tiles wrap to a second row instead of shrinking.
Less-motion visitors get an instant reveal, no shake, no flip.

How it works

1Slide how many days show, 5 to 7.
2Pick the reveal, an instant flip or a little shake first.
3Copy the prompt, the calendar's full game plan for your AI, into whichever AI you use.
4Fill in real rewards, their odds, and redemption; the code notes that prizes must be honored and prize rules checked where you operate.
5Claim today's tile as a test, then reload: it should stay claimed, with the same reward showing, not a fresh draw.
6Try a future tile too: locked means locked, today only, no early peeking.

What you can customize

Days shown: five fits a work-week promo; seven makes it a daily habit with a full week on display.
Reward reveal: instant flip is snappy; shake-then-flip stretches the little thrill by half a second.
Tiles, colors, and wording adapt to your brand automatically, because your AI builds the calendar right inside your own design, tile by tile.

You'll also like

Sam K.

Testimonial Wall

A social proof section built from your real customer quotes. Grid, carousel, or one big spotlight.

Floating Chat Launcher

A corner bubble that opens your real contact channels. Honest about not being live chat unless you have one.

Your name

you@email.com

BackNext

Multi-Step Form

A lead form split into small steps with a progress indicator. Less scary than one big form, same data.