code-anything.com
Log inStart free
Animated

Bloom

Bloom is a calm, cinematic editorial template for beauty, wellness, fragrance and food brands that want their hero to feel alive without ever autoplaying. The hero is a full-screen, PINNED experience: a tall scroll track holds a sticky 100vh stage, the organic clip fills it edge to edge, and scroll progress is mapped straight onto the video’s currentTime — so the bloom opens exactly as fast as the visitor reads and folds back if they scroll up. As it unfurls, four elegant caption blocks (a delicate eyebrow, a Fraunces serif headline and one line of copy) glide in from alternating sides within their own progress bands, each on a soft translucent scrim so the light footage stays legible. A signature HUD names the stage (seed, first light, unfurling, full bloom) beside a slim progress track with a bloom-head marker and a SCROLL cue. It all sits on a warm off-white paper surface with a faint grain, a Fraunces serif display voice, and rose + leaf-green accents; the organic clip is generated with Seedance 2.0 through phi-cloud, with a first-frame poster fallback and full prefers-reduced-motion support — never stock photography.

A warm paper studio at first light — a flower opening one scroll at a time, rose and leaf against off-white, unhurried and luminous.

bloom-scroll.code-anything.app
◍ Bloom · Chapter IIt opens as you read.An organic timelapse, paced by your scroll — never by a timer.
First lightGrown, not filmed.Every petal rendered with Seedance 2.0 — no stock, no photography.
UnfurlingSlow beauty, by design.For fragrance, skincare and wellness stories that want room to breathe.
Full bloomArrive, luminous.The clip settles wide open into a single, quiet invitation.
◍ SCROLL = THE BLOOM

You set the pace of the opening

No timer, no autoplay. Scroll progress is mapped straight onto the clip’s timeline, so the flower opens exactly as fast as you read — and folds back if you return. A first-frame poster covers slow connections, and everything honors prefers-reduced-motion.

Scroll-scrubbed timelapse

The hero clip never autoplays. It advances only as the visitor scrolls, so the bloom feels tactile — paced by the reader, not a timer.

Calm, editorial layout

A warm off-white page, a serif display voice and generous air. Built for beauty, fragrance, wellness and food stories that want to breathe.

Generated, never stock

The organic clip is generated with Seedance 2.0 through phi-cloud — no stock footage, no photography, a first-frame poster for a graceful fallback.

◍ READY TO OPEN

Grow your own bloom.

Describe the moment — a peony opening, honey unfurling in tea — and generate an organic timelapse your visitors scrub open as they scroll.

A blush peony opening in soft morning light, dew on the petals…Generate video
Powered by Seedance 2.0 · phi-cloud

Design rules

The system, applied to any site

  • Build on a warm off-white paper canvas (around #F7F3EE) with a faint grain from a very-low-opacity repeating-linear-gradient, keep surfaces pure white, and hold strong contrast with a deep plum-ink text (#241C22) so the light template always reads clearly.
  • Make the hero a full-screen PINNED stage (a tall scroll track with a sticky 100vh, overflow-hidden stage) holding an organic timelapse that is SCRUBBED by scroll and never autoplays: map scroll progress 0→1 (from -wrap.top / (wrap.offsetHeight − innerHeight)) onto the video’s currentTime, so the bloom opens fluidly as the visitor scrolls down and folds back as they scroll up.
  • Over the edge-to-edge video, glide 3–4 elegant Fraunces caption blocks in from ALTERNATING sides within their own progress bands (each on a soft translucent scrim for legibility over the light footage), and overlay the signature HUD — a slim progress track with a small circular bloom-head marker plus a delicate stage label (seed → first light → unfurling → full bloom), a percent readout and a SCROLL cue.
  • Set one oversized Fraunces serif display headline (clamp into the ~2.8–6.2em range), often split between plain plum-ink and an italic phrase filled with a rose→leaf clipped gradient, then drop to calm Inter body and keep small stage labels in a system monospace.
  • Use rose (#E5567A) and leaf-green (#7BAE6E) only as accents — headline fill, the scrub track, buttons, marker glow and small botanical line art — and let the generous warm-white space and air carry the calm, editorial mood.
  • Never use stock photography: compose every visual from soft gradients, the generated timelapse clip and inline SVG botanical line art (a flower drawing itself open), and always honor prefers-reduced-motion by resting the clip on its first frame.

Ships with

Full-screen PINNED hero: sticky 100vh stage, edge-to-edge scroll-scrubbed timelapseSide-text overlays: 4 Fraunces captions gliding in from alternating sides per progress bandHUD over the video: bloom-stage label + slim progress track with bloom-head marker + SCROLL cue"Scroll = the bloom" intro + 3-up feature / benefit row (scrub, editorial calm, generated-not-stock)Generate-video CTA (Seedance 2.0 · phi-cloud)Footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Fraunces

Body

Inter

Radius

20px

Explore palettes

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.