枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空のベーカリー&カフェ「Amber & Rye」の縦長1ページサイト。朝/昼/夕/夜4状態のパレットが連続補間で空・影・コピー・メニューを塗り替え、太陽と月がアークを移動し、時刻スライダーをドラッグすると全要素がCSS変数を介して連動する。街並み・店構え・雲はニュートラル昼調のAI生成透過レイヤーで、色温度は同じ補間値から作るCSSフィルタが与え、夜は窓明かりレイヤーがopacityで連続点灯する。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a single self-contained HTML file (inline CSS + inline vanilla JS, no framework; CDN allowed only for GSAP + its ScrollTrigger plugin) for "Amber & Rye" — a fictional neighborhood bakery & café. The hero scenery and the Morning Bake menu photos are locally AI-generated WebP plates (see Imagery below); every other visual is CSS or inline SVG, and there are no fetch calls. This is a complete, vertically scrolling one-page site (window scroll is fine; a container-scroll constraint only applies to the embedded-iframe version of this demo). Four sections, one motion language throughout — THE WHOLE WORLD CHANGES WITH THE TIME OF DAY: Hero (sky + slider) → Menu → Rhythm (a clickable day-map) → Footer.
## The single source of truth
Call 'new Date()' exactly ONCE, on initial mount, purely to seed a numeric React-style state 'timeMinutes' (0–1439, minutes since midnight). Every value in the entire page — sky gradient, shadow length, headline copy, the featured menu, sun/moon position, the footer's open/closed line — is derived purely from 'timeMinutes' inside the render path; nothing ever reads 'Date()' again outside of the live-clock effect described below. Two modes: 'live' (a 1-second 'setInterval' re-reads 'Date()' and writes the result into 'timeMinutes') and 'manual' (entered the instant the user drags the time slider; the interval is suspended and the slider is the only writer). A "⟲ Back to now" button, disabled while already live, calls 'setMode("live")' and immediately re-seeds 'timeMinutes' from 'Date()', then the 1s interval resumes.
## Four time-of-day anchors (palette + copy + menu, one shared data source)
Interpolate ALL colors continuously between four fixed hour anchors using this palette table (hex): Morning @ 6.5h — sky top #FFD9A8 → bottom #FFB4A2, celestial glow #FFD37A, surface #FFF7EC, border #E8D2B8, text #2B2013, window glow #FFDCA0, night-overlay 0. Midday @ 12.5h — sky #6EC3F4 → #DFF3FF, glow #FFF4D6, surface #FFFFFF, border #DCE3EC, text #1E2430, window glow #FFFDF4, overlay 0. Evening @ 18.5h — sky #4C3B77 → #FF8F6B, glow #FFB37A, surface #FBEFE3, border #E3CBB0, text #2B1A22, window glow #FFB877, overlay 0.18. Night @ 23h — sky #05070F → #1B2340, glow #CBD5F5, surface #14162A, border #333756, text #E8EAF6, window glow #FFD37A, overlay 0.92 (the whole page becomes a dark theme at night — surface and text both interpolate along with the sky). To find the current blend: locate which two consecutive anchors (in hour order, wrapping past midnight from Night back to Morning) bracket the current hour, compute a local 0–1 progress 't', ease it with a cubic smoothstep ('t*t*(3-2*t)'), then linearly interpolate every hex color channel-by-channel between the two anchors at that eased 't'. Write the eight resulting values as CSS custom properties on the page root ('--cs-sky-top', '--cs-sky-bottom', '--cs-glow', '--cs-surface', '--cs-border', '--cs-text', '--cs-window-glow', '--cs-overlay') — every section's background, border, and text color reference these variables directly, so the whole page's color temperature updates in one synchronized write, never per-section. For discrete content (headline, subcopy, menu items — text can't blend), pick whichever of the two bracketing anchors is closer (t < 0.5 = first anchor, else second) as the "dominant" state, and swap to its exact copy: Morning — "The ovens have been on since five." / "Fresh loaves, first coffee, the kind of quiet before the street properly wakes up." / menu "Morning Bake": Sourdough Boule, Cardamom Bun, House Drip. Midday — "Sun straight overhead, line out the door." / "This is the hour for a proper lunch — soup, a sandwich, somewhere to sit for ten minutes." / menu "Midday Rush": Roast Vegetable Tartine, Tomato Bisque, Iced Oat Latte. Evening — "Golden hour, and the last bread comes out." / "We slow down here — a glass of something, a board of cheese, the window going orange." / menu "Golden Hour": Fig & Comté Board, Natural Wine by the glass, Olive Oil Cake. Night — "Closed — but someone's always proofing dough." / "The dining room is dark. Upstairs, tomorrow's loaves are resting in the cold." / menu "Tonight, We Rest": Tomorrow's Sourdough, Overnight Oats, A Table for Breakfast. When the dominant state's key changes, run a quick GSAP crossfade on the hero text block and the menu grid (from opacity 0.2 / y 6px to opacity 1 / y 0, 0.45s power2.out) so the swap reads as a soft flash rather than a hard cut.
## Imagery (AI-generated plates, neutral-midday only — time-of-day is applied in CSS)
Generate seven images with an image AI. CRITICAL MECHANISM: because every color on the page is CONTINUOUSLY interpolated (1440 slider steps), the time-of-day color temperature must NEVER be baked into the images — a day/night image pair would double-expose at intermediate hours, so there is exactly ONE set of plates, graded live by CSS filters. All four scenery plates are generated in a single neutral midday tone (warm-grey buildings #6B5E55–#4A4038 in 2-3 tones, window openings unlit and darker than the walls, off-white clouds #FFFFFF–#F2EEE6, NO warm or cool color cast anywhere) on a flat pure-magenta #FF00FF background, then chroma-keyed to transparent WebP locally (alpha ramp on magenta-ness 'min(R,B)−G', plus despill). Shared style block: "flat modern storybook illustration of a small-town street, clean vector-like shapes, 2-3 tones per element, neutral midday lighting, subtle paper grain, no text, no people, no watermark". The plates: (1) **skyline** — a band of low parapet-roofed buildings (2–4 storeys, a water tower and chimneys as accents) filling the bottom third, touching the bottom and both side edges; (2) **storefront** — one corner bakery (blank sign face, striped awning, big showcase windows, a door), bottom-anchored, touching neither side edge; (3) **clouds** — 2–3 soft flat clouds touching no image edge, cut apart into individual sprites afterwards; (4) **windows-lit** — the SAME composition as skyline+storefront overlaid, but containing ONLY warm #FFD37A glowing rectangles at every window/showcase position (no building outlines) — the additive night layer. Three opaque food photos (a scored sourdough boule / a knotted cardamom bun / a cup of light-roast drip coffee) share "warm natural-light food photography on a light cream surface, soft morning window light, shallow depth of field, no text, no hands".
Two post-steps make the plates usable, and both exist to guarantee REGISTRATION — a glow rectangle that drifts off its window is the one artifact that destroys the whole effect. (a) The storefront is cropped to its own bounding box and placed as a separate, smaller FOREGROUND element (~44% of the sky's width, anchored bottom-left at 4%); if it is left full-bleed at the scale that makes the skyline reach both edges, the bakery fills the middle of the sky and swallows the sun/moon at the top of its arc. (b) Because of (a), one shared windows-lit plate no longer works, so the glow is produced as TWO plates, each locked to the layer it belongs to: the TOWN glow is the AI windows-lit plate with the storefront's (slightly dilated) silhouette erased, kept full-bleed alongside the skyline; the SHOP glow is NOT taken from the AI plate at all — it is synthesized from the storefront plate itself by selecting its dark glass pixels (luma ≤ 46 among opaque pixels), cleaning them with a morphological opening (erode 3 → dilate 3, which drops the hairline cornice shadows that would otherwise light up as gold pinstripes), and filling them with #FFD37A at an alpha that rises as the glass gets darker. Deriving the shop's light from the shop's own artwork means it cannot drift, whereas the AI's hand-placed showcase rectangles measurably do. The result is two "geometry pairs" — (skyline, town-glow) full-bleed and (storefront, shop-glow) sharing one crop — each pair placed by one identical rule, so both can sit at different scales and still register.
At runtime their color temperature comes from ONE CSS variable, '--cs-img-filter: sepia(S) saturate(SA) hue-rotate(H) brightness(B)', whose four numbers are lerped with the SAME eased 't' as the palette between per-anchor grades: Morning 'sepia 0.26 / saturate 1.12 / hue −10deg / brightness 1.04'; Midday '0 / 1 / 0deg / 1' (the plates' native tone); Evening '0.4 / 1.18 / −16deg / 0.9'; Night '0.38 / 0.62 / −175deg / 0.34' (the −175deg swing pushes the warm-grey buildings deep blue). The cloud sprites take the same filter, at 'opacity: calc(0.92 − var(--cs-overlay) · 1.15)' so they are fully gone slightly before full night — otherwise the night grade turns a white cloud into a dark blot across the starfield. Menu photos use a softened variant '--cs-food-filter' (sepia ×0.45, hue ×0.3, saturation pulled halfway back to 1, brightness floored at 0.74) so food stays appetizing at the dark ends of a menu window. Both glow plates take NO color filter (their warmth must survive the night grade) — only 'opacity: var(--cs-overlay)', which makes every window in town, and the bakery's own glass, come up continuously as dusk deepens and fade out toward dawn. Stacking order inside the sky box: starfield → cloud sprites → sun/moon → skyline → town glow → horizon-darkening gradient → storefront → shop glow, so the foreground bakery sits in front of the haze and reads as the nearest thing on the street.
## Sun and moon arcs (independent, crossfading)
Both bodies ride the same parametric arc across the hero sky: for a progress value 't' in [0,1], 'angle = t·π', position 'xPct = 50 − cos(angle)·40' and 'yPct = 66 − sin(angle)·58' (percentages of the sky box; 66% is the horizon line, 40/58 are the arc's x/y radii, the y-radius deliberately kept smaller than the horizon line so the apex never clips the top of the sky box, but large enough that the zenith clears the storefront plate's roofline rather than sitting behind it) — t=0 is the rise point at the left horizon, t=1 is the set point at the right horizon, t=0.5 is the zenith. The SUN's window is 6.5h (dawn) to 18.5h (dusk); the MOON's window is 18.5h to 30.5h (dusk to the next dawn, i.e. hours before 6.5 are treated as +24). Each body's opacity crossfades to 0 outside its window with a 0.6-hour smoothstep fade at both edges, so sun and moon overlap and swap smoothly at dawn/dusk rather than popping. Bodies are 44px (sun) / 30px (moon) circles with a soft outer glow ('box-shadow: 0 0 46px 10px var(--cs-glow)'). The town itself is the image stack described under Imagery, and note that the arc's y-radius and the storefront's ~44% off-centre placement are chosen together: the bakery must not sit under the zenith, or the sun simply disappears behind its roof for the middle third of the day. Its windows come on continuously via the glow plates at 'opacity: var(--cs-overlay)' rather than a single always-lit rectangle.
## Shadow length and steam (continuous physical proxies, decoupled from the visual arc)
Compute a separate, always-defined solar elevation curve 'elevation = cos(((hour − 12.5) / 24) · 2π)', which is +1 at solar noon and −1 at solar midnight for ANY hour (no day/night branching needed). Shadow length factor = 'lerp(1.25, 0.18, clamp01((elevation + 1) / 2))' — shortest (0.18×) at noon, longest (1.25×) at midnight — applied as a CSS variable '--cs-shadow-len' multiplying the offset of every card's 'box-shadow' (e.g. 'calc(var(--cs-shadow-len) * 4px) calc(var(--cs-shadow-len) * 8px) …'), so every shadow on the page lengthens and shortens together across the day. A small SVG coffee cup in the Menu section has three wavy steam paths whose opacity = 'lerp(0.12, 0.6, clamp01((1 − elevation) / 2))' — steam is faint at midday and thickest at night, a cold-air proxy tied to the same elevation curve.
## Section 1: Hero
A tall sky panel (linear-gradient 'var(--cs-sky-top)' → 'var(--cs-sky-bottom)', ~62% of hero height) containing: a twinkling starfield layer (repeating radial-gradient dots, opacity = '--cs-overlay', gentle 4.5s opacity pulse), three slow drifting cloud sprites (the cut-apart cloud plate, widths 200/140/92px, opacity = '0.92 − --cs-overlay·1.15', 46s/62s/78s linear 'translateX' loops right across the sky), the sun and moon markers, and then the scenery stack from Imagery (skyline → town glow → horizon-darkening gradient → storefront → shop glow). Below the sky, a panel (background 'var(--cs-surface)') holds: eyebrow "Amber & Rye — Neighborhood Bakery & Café", the dominant state's H1 and copy, then the TIME SLIDER control — a custom-styled 'input[type=range]' (0–1439, step 1) with a rainbow dawn→noon→dusk→night track gradient, a time readout ('H:MM AM/PM', tabular-nums), the dominant state's label, the "⟲ Back to now" button (disabled in live mode), and tick labels 12am/6am/12pm/6pm/12am — then a plain (non-magnetic) pill CTA "See the menu →" anchor-linking to the Menu section.
## Section 2: Menu
Eyebrow "What's Out Now", the dominant state's menu title + the coffee-cup/steam SVG beside it, the dominant state's 'hoursNote', and a responsive grid ('repeat(auto-fit, minmax(min(240px,100%),1fr))', gap 18px) of that state's 3 menu items as cards (name + one-line note), all styled from '--cs-surface' / '--cs-border' / '--cs-shadow-len'. The three Morning Bake items each lead with their food photo (3:2 'object-fit: cover', 10px radius, 1px '--cs-border' hairline, 'filter: var(--cs-food-filter)'); the other states' items have no photo, so the card renders name-and-note only and the grid stays the same shape either way.
## Section 3: Rhythm
Eyebrow "The Rhythm Of A Day", H2 "Four moods, one storefront.", intro copy about tapping an hour to travel there. Four clickable cards, one per anchor, each showing its formatted anchor time (6:30 AM / 12:30 PM / 6:30 PM / 11:00 PM) and label (Morning/Midday/Evening/Night) — NOT a numbered list (no "01/02/03" prefixes). Clicking one calls the same slider-setter (enters manual mode, jumps 'timeMinutes' to that anchor's hour), and the currently-dominant card gets an inset glow ring ('box-shadow: 0 0 0 2px var(--cs-glow) inset').
## Section 4: Footer
H2 "Stop by whenever the light finds you." A pill status readout computed live from 'timeMinutes' against operating hours 6.5–20.5: "Open now — closes at 8:30 PM" or "Closed — opens at 6:30 AM". A ghost pill CTA "Get in touch ↗" (mailto), and a footer meta row ("© 2026 Amber & Rye" · "Corner of 5th & Mill" · "@amberandrye").
## Scroll animations & entrance
Every section's content elements carry a shared "light wash" entrance (this page's own reveal language, not a plain fade): opacity 0 → 1, y 16px → 0, scale 0.96 → 1, 0.85s power3.out, 0.08s stagger — the hero plays this once on load (0.15s delay), every other section replays it via ScrollTrigger at the section's top-78%-of-viewport line (scoped to the page's own scroll container), reversing 0.3s power2.in on scroll-back.
## Performance & accessibility
All color math (hex parsing, channel lerp, smoothstep) runs synchronously in the render path on a single numeric state change — no requestAnimationFrame loop is needed since updates only occur once per second (live) or once per slider input event (manual). Only CSS custom properties and 'transform'/'opacity' are touched for continuous visuals (never layout-affecting properties). Respect 'prefers-reduced-motion: reduce': disable the cloud-drift and star-twinkle keyframe animations, skip the GSAP crossfade flash and every scroll-entrance animation (render sections in their final state instantly), while the time-of-day color interpolation itself still runs (it is data, not motion) with a plain CSS 'transition' on background/color swapped to 'none'. The slider is a real 'input[type=range]' with an 'aria-label', fully keyboard-operable (arrow keys); the "Back to now" and Rhythm cards are real focusable buttons with visible focus outlines; decorative sky elements (stars, clouds, skyline, celestial bodies, steam) are 'aria-hidden'. Clear the live-mode 'setInterval' and revert the GSAP context / ScrollTrigger instances on teardown.
## Action flow and content
Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.
Use this content for the dialog, including the option details and notes:
{
"slug": "chrono-shift",
"brand": "AMBER & RYE",
"accent": "#855132",
"title": "Make a little room in your day",
"intro": "Choose what brings you to the bakery, and keep the questions for your visit.",
"facts": [
[
"Morning",
"Sourdough, cardamom buns and house drip"
],
[
"Midday",
"Tartines, soup and a quieter table"
],
[
"Planning",
"The time-of-day display is a mood preview, not current stock or availability."
]
],
"groups": [
{
"label": "Visit focus",
"options": [
{
"title": "Coffee & a bake",
"detail": "A simple stop for a drink and something from the counter."
},
{
"title": "Bread & a gathering",
"detail": "A conversation about quantities and collection for a small gathering."
}
]
}
],
"date": true,
"brief": "Describe what you would like to pick up or the occasion you are planning.",
"notes": [
"A visit plan only. The fictional street corner is not a verified destination."
]
}
- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.