枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
GRADIENTAは4種の実WebGL背景を選び、色・動き・フレームを調整する架空の色彩スタジオ。元の配色との比較、PNG静止画書き出し、プリセットの保存・復元、設定を保持する相談メモを備える。スクロールに連動する配色と、完全な動き停止にも対応。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a complete English website for GRADIENTA, a fictional colour studio, with a working four-field editor. Use a self-contained HTML file, inline CSS/JS, raw WebGL2 and optional GSAP for a .9-second palette jump. The site uses ordinary document scrolling; adapt the reference's internal scrolling measurements to that document. A visitor must be able to explore, adjust, compare, pause, export an actual PNG, save/restore a preset and keep the chosen settings in a local project brief.
## Design and page composition
Use dark editorial typography and generous space around actual colour fields. Background #0D0B14; studio modal #120E19; foreground #F4EDF9; secondary #C3B1D0; quiet borders #7A668C; primary control #D7BDF2 with dark #21162D text. System sans-serif. Hero type clamp(44px,6.6vw,104px), weight 400, line-height 1.02, tracking -.05em; mobile clamp(42px,8.4vw,76px). Section type 34–60px, line-height 1.1, tracking -.04em, weight 400. Body 14–16px, line-height 1.8. Use square full-bleed art areas and border-line actions. Do not restore glowing pricing cards, pill-shaped controls, hover-only descriptions, invented subscriptions or unsupported wallpaper/video delivery claims.
Keep navigation visible: GRADIENTA home button, Collection, How it works, For your project, Pause motion. Below 900px use two rows and retain every action. Min 44px control height, visible focus, section navigation with actual nav-height offset and destination focus. The hero reads “A collection of living colour”, “Give the quiet / a little movement.” and “Four fields of colour. Shape their rhythm, find your frame, make it your own.” Include Explore the collection. A left-to-right and bottom dark scrim protects foreground text without tinting the editor's artwork.
Hero bottom: four named colour buttons, Silk / Ember / Ocean / Orchid, plus an explicit Follow scroll checkbox. A continuous position 0..3 maps the page's scroll progress to the four shader variants and to the CSS accent RGB. Split into low=min(2,floor(position)), high=low+1, mix=position-low. The shader uses smoothstep(0,1,mix); interpolate the DOM accent with the same mix*mix*(3-2*mix). Palette RGB stops are [192,132,252], [255,107,53], [14,165,233], [240,171,252]. Clicking a named palette turns Follow scroll off, so subsequent scrolling cannot silently replace that explicit choice. Use a .9-second power3.inOut jump while motion is allowed and immediate selection while stopped. Automatic scroll colour changes, pointer following and continuous rendering stop under Pause motion or live prefers-reduced-motion. Stop palette tweens when the page is hidden or a dialog opens.
Collection heading: “A different way / to hold attention.” Intro: “Open a field to tune its colours and motion. Keep a still, save a preset, or build a brief.” Two columns on desktop, one below 600px. Each card is a real button with an 8:5 shader preview, index, name, motion category, visible description and opening arrow. Use one shared offscreen WebGL2 renderer, blitting immediately into four 2D canvases. Draw only visible cards. At rest preserve their actual frames; hover or focus animates only the active visible card, capped at 30fps. Use up to 1.5 DPR, or 1 in embedded previews. Do not soften the art by using half-resolution backing stores. Preserve frames while releasing the shared GPU on hide or modal opening. A failure retains the simple colour fallback and every card action, with Retry previews.
1. Silk / Slow drift
Layers of indigo open into violet. A quiet field with enough depth to reward a longer look.
Possible use: An editorial opening or a restrained backdrop for a creative practice.
Original colours: dark #0f0d1a, middle #223868, light #c084fc. Original frame: 26 seconds.
2. Ember / Rising warmth
Warm light gathers near the lower edge, then rises through a dark field.
Possible use: A bold campaign moment, a music release or a warm visual identity.
Original colours: dark #3a160d, middle #9d4021 (unused by this two-colour field), light #ff6b35. Original frame: 14 seconds.
3. Ocean / Lateral flow
A layered blue current moves across the frame. Fine interference gives the surface a gentle rhythm.
Possible use: A technology story, a quiet product page or an ambient display.
Original colours: dark #0a3350, middle #0d6c9d (unused by this two-colour field), light #0ea5e9. Original frame: 21 seconds.
4. Orchid / Breathing colour
A soft bloom expands out of plum into pink, then returns. One slow breath gives the field its shape.
Possible use: A cultural programme, an expressive title screen or a creative event.
Original colours: dark #2a2640, middle #8d699e (unused by this two-colour field), light #f0abfc. Original frame: 13.5 seconds.
## Preserve the actual shader
Use GLSL ES 3.00, one fullscreen triangle from gl_VertexID, with four-octave simplex fbm (starting amplitude .5, halving each octave, frequency doubling). Uniforms: u_time, u_resolution, u_mouse, u_variant, u_prevVariant, u_mix; add u_scale, u_grain, u_custom, u_dark/u_mid/u_light. UV is (gl_FragCoord.xy-.5*u_resolution.xy)/u_resolution.y*u_scale.
Silk: st=uv+mouse*.5, flow=(t*.015,t*.010), p=st+flow. q=(fbm(p),fbm(p+(5.2,1.3))). r uses p+1.4*q with offsets (1.7,9.2)+.08*t and (8.3,2.8)+.06*t. f=fbm(p+1.4*r). Mix dark to middle at smoothstep(-.3,.5,f), then toward light at smoothstep(.25,.85,r.x+.3*q.y)*.7.
Ember: st=uv*1.2+mouse*.5, flow=(mouse.x*.1,-t*.12), q offsets (4.4,2.2), r uses 1.8*q with (3.3,1.1)+.10*t and (1.1,5.1)-.08*t. f=fbm(p+1.8*r). Height bias is 1-smoothstep(-.6,.5,uv.y). intensity=clamp(f*.5+.5+heightBias*.35,0,1); blend dark/light with smoothstep(.25,.9,intensity).
Ocean: st=uv*1.4+mouse*.5, flow=(t*.06,mouse.y*.05), wave1=sin(p.x*3+t*.5)*.15, wave2=sin(p.x*5.5-t*.35+p.y*2)*.08. Warp p+(0,wave1+wave2); q offset (2.1,4.4), r uses 1.2*q with (1,3)+.05*t and (4,1)-.04*t. f=fbm(pw+1.2*r). Dark/light blend is clamp(smoothstep(-.3,.6,f)*.8+.2*smoothstep(-1,1,wave1+wave2),0,1).
Orchid: p=uv+mouse*.3, breathe=sin(t*.35)*.15+.85, n=fbm(p*2+t*.05). Blend dark/light with 1-smoothstep(breathe-.6,breathe+.5,length(p)+n*.25). Never reverse smoothstep's edge arguments; that is undefined GLSL behaviour.
For the hero journey use original per-variant palettes (u_custom=0) and crossfade adjacent variants. For editor/gallery/export use a single selected variant and the user colours (u_custom=1). Final vignette: vig=1-smoothstep(.2,1.1,length(vUv-.5)*1.35), multiplier mix(.58,1,vig). Grain: (fract(sin(dot(gl_FragCoord.xy+u_time*45,vec2(12.9898,78.233)))*43758.5453)-.5)*u_grain. Keep exactly this shader in the editor and PNG export.
## Native colour studio
Open a native labelled dialog with Escape, visible Close, internal scrolling, a sticky bar and opener-focus restoration. Previous/Next visits all four fields and preserves each field's edits and frame. Start paused. Wide screens use art left and controls right; below 900px stack. Keep the selected image aspect ratio, fit the complete art inside 65dvh and never place a scrim on it. Explain missing WebGL with Retry live field while leaving settings, restore and brief available.
Colour controls: dark and light for all fields; middle only for Silk. Use native labelled colour inputs with the six-digit hex beside each. Numeric controls: flow speed 0..2 by .05, field scale .5..2 by .05, grain 0...06 by .002. Defaults 1,1,.028. Use 1-pow(.96,delta*60) pointer damping, delta capped at .05 seconds, and advance the stored clock by delta*speed. Keep the clock and actual/target pointer outside the GPU lifetime.
Play motion / Freeze frame, Compare original / Return to your edit, Reset this field. Comparison freezes and shows original colours/scale/grain at the same time and image format; do not discard edited values. Reset restores original settings, pointer and starting phase for this field only. A paused time input supports 0..10000000 seconds; keep partially typed decimals in a text input with inputMode=decimal, and apply a validated value on Enter or blur without erasing an invalid draft. Use at least 16px text inputs on mobile. two -1..1 range controls set horizontal/vertical offsets. Pointer following is available while playing on a mouse. Touch keeps scrolling; the offset controls provide an equivalent deliberate adjustment. Stop the clock and pointer completely for system reduced motion. A still or preset export freezes at the captured frame.
## Real PNG and preset delivery
The format choices are:
- Landscape · 1920 × 1080
- Portrait · 1080 × 1920
- Square · 1600 × 1600
- 4K landscape · 3840 × 2160
Changing the format changes the preview aspect ratio. Export still as PNG creates a new offscreen WebGL2 renderer with preserveDrawingBuffer=true, sizes its actual drawing buffer to the selected dimensions, renders the same settings and frame, then encodes image/png. Never scale up the screen preview. Check MAX_RENDERBUFFER_SIZE and MAX_VIEWPORT_DIMS; if unsupported, preserve settings and suggest a smaller format. Treat null/empty encoding, render/context failure, exceptions and a 15-second encoding deadline as failures. Cancel pending export on closing the editor; dispose every temporary program/context in all completion/failure/cancellation paths. Ignore late callbacks from cancelled jobs. Request a download via a Blob URL; report “download requested”, not proof of a file saved. Revoke the Blob URL after the browser consumes it. Make retry available. While comparing the original, return to the edit before exporting.
Save preset captures the current settings and runtime frame on the click, not a stale render. JSON format: {format:"gradienta-preset",version:1,settings:{variant,speed,scale,grain,dark,mid,light},frame:{time,x,y}}. On download failure retain the exact complete JSON in a labelled selectable textarea. Restore preset accepts at most 16 KB, validates format/version/known variant, finite bounded controls, six-digit colours, time 0..10000000, x/y -1..1. Invalid input must leave the current settings untouched. Valid restore returns the selected field to the saved frame, paused, with pointer targets equal to its saved offsets. Ignore old file-read callbacks after another restore request or dialog close.
## Project planning and page conclusion
How it works: Choose the feeling / Make it yours / Keep the direction. Explain what the editor actually provides: PNG stills and reusable presets. Do not imply animated video, software installation or commercial usage rights are delivered by saving a brief.
“For a website” preselects Website: responsive composition, text contrast, reduced motion and a device budget; bring audience, pages, brand colours and supported devices. “For a screen” preselects Display: screen dimensions, viewing distance, playback equipment and running time. Both preserve the selected field's colours, motion values and current reference frame into the local review and saved text. The editor's project-brief action does the same. Footer: “Let colour / set the pace.” and Find your field. Identify GRADIENTA as a fictional colour studio and the PNG/preset tools as local browser features.
## Reliability and verification
Allocate only for a genuinely visible picture with positive intersection area. Hero and editor use independent visible sessions; gallery uses one shared context. Release hidden resources, preserve all data, render and validate the first frame before presenting a live canvas, and provide explicit retry. Delete every successfully created shader/program on partial compilation/link/uniform failure. Cancel RAF, tweens, observers, file callbacks and export deadlines on teardown. Under system reduced motion and explicit pause, no autonomous animation remains; manual selection, controls, restore, comparison and PNG export still work.
Verify actual GPU output, all four distinct fields, original comparison at the same frame, native colour/time/range input, PNG decode and dimensions on desktop/mobile, low-capability export failure, interrupted export, malformed restore, focus/scroll at 200% zoom and the complete brief/download journey. Source tests and a build do not prove visual quality.
## 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": "gradient-mesh",
"brand": "GRADIENTA",
"accent": "#d7bdf2",
"paper": "#120e19",
"ink": "#f4edf9",
"colorScheme": "dark",
"title": "Keep a colour direction",
"intro": "Keep the chosen field and the intended use together before planning the final format.",
"facts": [
[
"Studio tools",
"Four real-time fields, colour and motion adjustment, original comparison, PNG still export and preset save/restore."
],
[
"Website",
"Agree responsive layout, text contrast, a motion alternative and a device performance budget."
],
[
"Display",
"Agree screen dimensions, viewing distance, playback equipment and running time."
]
],
"groups": [
{
"label": "Plan",
"options": [
{
"title": "Website",
"detail": "A live field as part of a responsive website."
},
{
"title": "Display",
"detail": "A composition for a screen, presentation or event."
}
]
}
],
"brief": "Describe the audience, where the field will appear, the format and any timing or accessibility requirements.",
"notes": [
"This is a local project brief for a fictional studio. PNG export produces a still image; presets hold procedural settings. Animated video, installation, usage rights and project fees would be agreed separately."
]
}
- 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.