FP37 | Rainy Day | FIT=C | Startups & tech | Playful & bold
TECHNIQUES: scroll pin hover tap touch focus 3d rotate product card shop back filter motion responsive contact account font hero gsap lenis
BORN_HOOD_ADVICE: Coins/jar game metaphor unrelated to merchandise.
DESIGN_SIGNATURE: 's colors] The design The idea: saving that feels like a game, chunky, bright and satisfying. Font: Gabarito only, extra heavy and tightly spaced for huge headlines, regular for body text. Colors: rain blue #3D6BFF, sunshine #FFD84A, coral #FF7A59, ink #121826 and cloud #F4F6FB. Buttons are fat rounded pills with a darker lip that presses down when tapped. Order: a floating white pill nav; a rain-blue hero whose giant headline ends with a gold coin as its full stop, beside a stage with a realistic phone, a glossy cloud hiding the sun, faint rain and a glass jar with a hanging balance tag; three numbered steps scrolling past that stage; glass jars of different shapes on a rainy windowsill; three fanned phones on sunshine beside numbered game features; a calculator with coin slider handles that grows a coin stack per month; a dark safety section with a striped umbrella sheltering a jar; coral reviews with a huge rating and drifting speech bubbles; a blue download section with a spinning coin; a dark footer. Signature move: the stage holds still while you scroll. The phone, with real thickness and side buttons, tilts to a new angle for each step while its screens slide like a real app: home, a round-up notification, a drop screen, a goal ring. Coins with rims, embossed weather symbols and shine fall from the cloud, flip, bounce and pile up in the jar; the jar squashes on impact, the tag swings and counts up, the rain fades and the sun comes out. Tapping a windowsill jar drops in a coin.
HTML_SURFACE: headings=Make itrain; Buy the $4.35 oat latte.; Every round-up becomes a coin.; Six months of lattes later.; A jar for every someday.; Plays like a game. Pays like a bank.; Watch it grow.; Rain or shine, your money's covered.; People get weirdly attached to their jars.; Your first coin is 65¢ away. | ids=n, grG, gfG, grS, gfS, grC, gfC, jwall, jbk, jhl, jrim, jsh, jca, sunG, sunGl, clG, mD, mC, mSn, cbG, cbS, cbC, cmG, cmS, cmC, cs, ceG, ceS, ceC, coin, logo, i-sun, i-cloud, i-rain, i-bell | functions=rng, el, onFrame, tick, loop, openMenu, closeMenu, walk, inView, jarPts, cub, arc, Jar, setCount, pop, measure, spawnHero, storyS, sizeShelf, calc, render, upd, finder
ORIGINAL_PROMPT: prompt/rainy-day.md (SHA256 e701d4ddbe39c68f22ecb9e5e92c2726eb28a570ceb4367424db8fc3be8e09d0)
EXAMPLE_SOURCE: example/rainy-day.html (SHA256 a6af33c8b164deee6f1e0c02ff4afd1becd629cbdd8292511a194ff4277f343d)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\rainy-day\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
