FP49 | The Reef Line | FIT=C | Places & events | Kinetic type
TECHNIQUES: scroll scrub pin hover touch focus rotate back filter mask motion contact font hero gsap lenis
BORN_HOOD_ADVICE: Graphic water-filled statistics don't map to truthful product claims.
DESIGN_SIGNATURE: 's colors] The design The idea: the cause told as a slow dive, in giant moving words and hard numbers whose letters fill with water. Fonts: Big Shoulders Display, heavy and uppercase, for big words, numbers and labels; Newsreader for body text, with one italic phrase per heading. Colors: deep ocean #062C43, abyss #031B29, deep turquoise #0B6E79, lagoon #3DD6D0, reef coral #FF6F59 for buttons and warnings, sand #F1E9DA for light sections. Behind the page sits one living sea: slow waves, rippling light, slanted sun shafts and drifting specks, darkening as you scroll deeper, with a thin depth gauge at the right edge. Order: a hero whose second headline word is an outline that fills with turquoise water on load; the problem, pinned, where each statistic counts up and fills its outline with coral-red water to its own value, so 50% fills halfway; three giant words that slide sideways and fill with water as you scroll, the last with a reef photo; numbered steps on sand beside line drawings that draw themselves; a pinned counter climbing to the total as a grid of dots lights up; one person's story with a big photo and a logbook; a bar chart beside a headline figure filling to its percentage; donation tiers as tall columns where the chosen one floods with water, with a monthly or one-time switch and a live line saying what the gift does; volunteer dates and a form; a deep footer whose huge name fills with water at the end. Water lines move gently; sand sections meet the water with a drifting wave edge.
HTML_SURFACE: headings=Replant theReef.Reef.; The problem, in three numbers; CoralCoral growsgrows back.back.; Five steps. No shortcuts.; 12,400 corals planted12,40012,400; CeliaMarrero; 88¢88¢of every dollar goes into the water.; Put coral in the water.; Get in the water with us.; Come see the nursery. | ids=n, sea, nav, menu, main, top, hero-h, heroFw, problem, prob-h, turn-h, how, how-h, art, impact, imp-h, story, diver-h, money, money-h, give, give-h, giveForm, fqm, fqo, giveSum, otherAmt, giveBtn, volunteer, vol-h, vn, ve, vc, vd, nl | functions=rng, measure, clip, setLvl, setTxt, tickFW, mk, size, onScroll, f1, pl, pth, segd, tube, stag, tx, circ, setStep, freq, paintTiers, summary, setMenu, fit, frame, loop, start
ORIGINAL_PROMPT: prompt/the-reef-line.md (SHA256 541dbac603b4c8182e66d15c2aeb7f3b24efccf025079dd80401733776849ce4)
EXAMPLE_SOURCE: example/the-reef-line.html (SHA256 b9076bd4b4d07544a8f78bdf9844b1d5d959ca5c6f8575a355966619ca10f6f8)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\the-reef-line\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
