枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空スタジオAURORA STUDIO。液体光のWebGL背景と丸窓、スクロール連動リール、6作品の全画面映像・制作意図・参考選択・相談メモを備える。動き停止時は全作品を通常の一覧で見られる。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a complete fictional studio site, AURORA STUDIO, in English. Use a single self-contained HTML page with inline CSS/JS and ordinary document scrolling; adapt the reference demo's container-relative scroll measurements to the document. Use raw WebGL2/GLSL for liquid light and GSAP ScrollTrigger for the scroll choreography. The page must work as a studio portfolio: explore films, understand their direction, select references and review/save a local project brief.
## Art direction and content
Use an editorial composition with generous space, restrained sans-serif typography, square image frames and quiet rules. Background #0A0A12, foreground #F4F1EB, violet #7C6CFF, cyan #4FE3FF, secondary text #C2BBD2. Use an open two-column hero: “Light in motion.” / “Made to move you.” beside “From first thought to final frame.” and “We shape identities through film, motion and the web. One creative direction, from concept to launch.” Display type: clamp(38px, 4.7vw, 76px), weight 500, line-height 1.12, tracking -0.045em. Section headings: clamp(28px, 3.4vw, 48px), line-height 1.15, weight 500. Body: 14–16px, line-height 1.75. Container max-width 1440px with responsive side space. Preserve readable solid text over the light. No animated gradient text, blob-shaped capability cards or invented client achievements.
Navigation contains Practice, Reel, Contact and a visible Pause motion / Motion off control. Retain every action on mobile: studio mark and motion on row one, section navigation on row two. Every control has a visible focus outline and at least 44px interaction height. Use actual nav height for section offsets, then focus the destination without extra scrolling.
## One liquid-light backdrop
The first section is position:sticky;top:0;height:100vh and is contained by the complete page content. Its absolutely positioned canvas stays behind subsequent sections. Separate the canvas host from headings and controls. All later panels are normal-flow siblings over it. Draw one fullscreen triangle using gl_VertexID and GLSL ES 3.00, with uniforms u_time, u_resolution and u_mouse.
Preserve the reference's Ashima 2D simplex noise with four-octave fbm (amplitude .5 halving, frequency 1 doubling). uv=(gl_FragCoord.xy-.5*u_resolution.xy)/u_resolution.y; st=uv*1.25+u_mouse*.6; p=st+vec2(u_time*.05,u_time*.03). q=(fbm(p),fbm(p+vec2(1.7,9.2))). r=(fbm(p+1.6*q+vec2(1.7,9.2)+.15*u_time),fbm(p+1.6*q+vec2(8.3,2.8)+.126*u_time)); f=fbm(p+1.6*r). Mix #0A0A12 to #7C6CFF using smoothstep(-.4,.6,f), then toward #4FE3FF using smoothstep(.35,.85,r.x+.3*q.y)*.65. Use a defined descending vignette: 1.0-smoothstep(.25,1.05,length(vUv-.5)*1.4); do not reverse smoothstep's edges. Add the existing fine animated grain at strength .035.
Hold time and pointer state outside the GPU object. Cap delta at .05 seconds and pointer damping at 1-pow(1-lerp,delta*60), with lerp .05 normally and .09 while the footer CTA draws the light toward its centre. Clamp pixel ratio to 1.5, or 1 in an embedded preview. Stop advancing time and pointer when paused. Allocate/draw only when the actual surface is visible; release the context when hidden, and reconstruct from the same state. Suspend background playback while either modal is open. Validate shader compilation, linking, uniforms and the first draw. Release both shaders, the program, listeners and any partially built resources on every failure path. Keep a dark static background and all content available if WebGL2 fails; show Retry background in the navigation. After successful retry, return focus to the motion control. A stopped session performs no continuous rendering.
## Practice, portholes and process
Practice heading: “Designed to make a connection.” Four entries: Motion Direction, Identity Systems, WebGL Experiences, Sound Design. Explain their deliverables and give each a Discuss action that preselects Motion identity or Interactive experience in the brief.
Practice, process and footer have separate background masks with circular openings. Use radial-gradient alpha masks around (--wx,--wy), with an opening to calc(--wr - 2%), soft edge at --wr and opaque at calc(--wr + 14%). Practice centre 82% 40%, process 16% 62%, footer 50% 38%. Scroll from top 75% to top 15%, scrub .6, opening radius to 40% for practice/process and 58% for footer. Content remains outside the mask. Capability and footer reveal uses a nine-segment wavy clip-path edge, amplitude 6%, duration 1.2s, stagger .12s. All content is visible without animation.
Process heading: “A thought, brought to life.” Four steps are “Define the purpose and audience”, “Set the creative direction”, “Prototype the experience”, “Launch and keep it moving”. Show static numbers 01–04 and liquid gauges filled 25%, 50%, 75%, 100%; they describe stages, not studio results. Tubes are 64×180px. Animate the fill from top 80% to bottom 40%, scrub .5 with .08 local offsets. Keep every caption visible in the stopped layout.
## Six film studies
Reel heading: “Studies in light and motion.” Subcopy: “Six visual directions. Open a film to explore the idea.” Use a 260vh scroll runway with a sticky 100vh viewport and a horizontal flex track of six buttons, with visible names, category, index, “View film & direction” and selected-reference state. Tiles use a 4:5 crop only in this overview. ScrollTrigger sets x=-(track.scrollWidth-viewport.clientWidth)*progress; scrub .8. A scroll update may shear the track by clamp(velocity/260,-6,6) degrees, then settle to zero in .35s. Do not run an idle frame loop for skew. Keyboard focus on an offscreen tile must immediately bring the whole tile into view, accounting for the same scroll range. Enter or Space opens its film.
Overview clips retain their existing lightweight /video/demos/aurora-flow/reel-01.mp4 through reel-06.mp4 sources and corresponding still frames. Attach/play only while the actual tile is visible, with muted, playsInline, loop, preload=none; pause when obscured, hidden, motion is disabled or a modal is open. Keep the lighter embedded-preview variants. Never preload the six full-frame films on the overview or TOP.
Nocturne — Title sequence study
Violet ink gathers around a small source of light. Fine threads give way to a slow, sculptural bloom.
Direction: Build a title sequence around emergence: hold the opening frame, let the form gather, then introduce a restrained typographic layer.
Possible use: A film opening, cultural programme or atmospheric launch.
Scope to discuss: Visual direction, title choreography and a short sequence treatment.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/nocturne.mp4
Poster: /video/aurora-studies/nocturne.jpg
Halcyon — Identity in motion
Two ribbons cross in violet and cyan. Their reflective edges create a mark that changes as it moves.
Direction: Use the crossing gesture as a consistent identity cue, then explore quieter crops for smaller formats.
Possible use: A music label, design event or moving brand identity.
Scope to discuss: A motion principle, a logo transition and format studies.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/halcyon.mp4
Poster: /video/aurora-studies/halcyon.jpg
Glasswave — Digital experience direction
Light travels along a folded, glass-like surface. The cyan edge gives the composition a clear path through the frame.
Direction: Explore a scroll-led material reveal. This film establishes the visual direction; an interactive version needs a separate prototype.
Possible use: An immersive product story or a technology launch.
Scope to discuss: Material references, a scroll storyboard and a browser prototype brief.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/glasswave.mp4
Poster: /video/aurora-studies/glasswave.jpg
Drift Field — Spatial film study
Cyan and violet clouds expand into the dark. Soft boundaries and an unhurried pace leave space around the subject.
Direction: Treat the frame as a room: keep movement broad and slow, with a clear resting composition between transitions.
Possible use: An exhibition entrance, ambient display or live event backdrop.
Scope to discuss: Spatial mood studies, screen-format planning and a loop treatment.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/drift-field.mp4
Poster: /video/aurora-studies/drift-field.jpg
Prism Choir — Light choreography
Beams of cyan and violet cut through a hazy space. The dark interval between them is as deliberate as the light.
Direction: Make rhythm visible through changes in light and spacing. A sound direction can be developed separately; this study is silent.
Possible use: A performance identity, programme announcement or stage screen.
Scope to discuss: A lighting vocabulary, transition studies and a sequence rhythm.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/prism-choir.mp4
Poster: /video/aurora-studies/prism-choir.jpg
Ion Bloom — Campaign art direction
A violet orb sits inside a restless cyan ring. A stable centre gives the surrounding energy a point of reference.
Direction: Keep the central silhouette recognisable across film and still formats, using the outer ring for moments of emphasis.
Possible use: A future-facing campaign, record release or digital launch.
Scope to discuss: A key visual, motion accents and campaign-format studies.
Source: AI-generated concept film, 720 × 1280px, 24 fps, 10 seconds, silent. A fictional studio study, not commissioned client work. The film is a visual reference; interactive behaviour, typography and sound would be developed for the project.
Full-frame film: /video/aurora-studies/ion-bloom.mp4
Poster: /video/aurora-studies/ion-bloom.jpg
## Film detail and reference selection
Use a native labelled dialog with Escape, an explicit Close button, internal scrolling and exact opener-focus restoration. Keep the close/navigation bar visible while reading. Show the chosen 720×1280px film uncropped with object-fit:contain and native controls, playsInline, preload=metadata and its full-frame poster. Start paused. These ten-second films are silent, AI-generated concept references; do not label them as live WebGL scenes or commissioned projects. Load only the selected full-frame film, and remove its source on navigation/close. Pause when the document becomes hidden. Display a visible loading state; a load/stall failure or 12-second deadline shows Retry film without deleting references. Retry restores the last playback position while paused and returns focus to the player on success.
Provide Previous/Next work, a live position count, description, direction, possible use and scope to explore. “Use as a project reference” is a real checkbox shared with the overview. “Build a brief with this work” includes that work even if its checkbox was not yet selected. “Save study notes” saves the full description and source context, with a selectable-text fallback if saving fails.
After the reel, “Your starting point.” shows selected references, individual remove controls, Clear references and Build a project brief. All selected work names, direction and scope must survive into the brief's review and saved text. Both the references area and footer “Let's make something move.” / “Start a project” use this same selection. Closing the brief retains references. The final footer identifies AURORA as a fictional studio with concept work only.
## Stop motion completely
Respect live prefers-reduced-motion and expose Pause motion. Stop the shader clock, pointer following, automatic video, all CSS animation, entrances, porthole scrub, parallax, gauge scrub, horizontal runway and smooth scrolling. Present the six works as an ordinary responsive grid: three columns on desktop, two below 760px, one below 480px. Keep the same full-frame film controls and complete reference/brief flow. Explicit playback inside the film dialog remains the visitor's choice. Teardown must leave no animation loops, scroll triggers, listeners, timers or media requests owned by the closed page.
Verify actual desktop/mobile layout, shader rendering, readable text, keyboard focus through the reel and dialog, native playback, interrupted loading, stopped motion, reference review/download and the browser's Back journey. A successful build is not visual acceptance.
## Current English composition
Use an editorial layout with a short two-line English headline, open space for the GPU scene and a separate supporting paragraph. Aurora: “Light in motion.” / “Made to move you.” Orbital: “Read the planet.” / “See what’s next.” Display type is 38–88px at desktop with line-height 1.06–1.12 and tight negative tracking; 32–64px on mobile. Body is 14–16px with line-height 1.75. Keep quiet border-line CTAs, one muted accent and the working English action flow. Under 680px, stack the layout and retain every navigation action. Aurora’s four steps are “Define the purpose and audience”, “Set the creative direction”, “Prototype the experience”, “Launch and keep it moving”. Orbital begins with Observe, Understand and Share. Describe satellite figures as interface examples and the studio works as concept studies; do not present fictional performance or client results as facts. This supersedes the earlier hero copy and achievement claims in the brief. Visual verification is required after implementation.
## Current video loading contract
This supersedes earlier blanket autoplay/preload instructions. Keep a real still frame from each background clip as its loading, failure and reduced-motion poster. Do not attach the MP4 URL or call play until the actual picture/scene is visible and needed. Use muted, loop, playsInline and initial preload=none; pause offscreen and in hidden tabs, and remove the source on teardown. A late play promise must not restart a stopped clip or pause a newer owner of the element. After rejection, keep the poster and retry on re-entry instead of retrying each animation frame.
Observe each reel tile, including clipping by the horizontal viewport; do not start all six movies when the reel section becomes visible. This automatic-playback rule applies to overview tiles only. The separate native film dialog loads one full-frame 720×1280 film with preload=metadata, starts paused and exposes native playback controls. Preserve selected references and paused playback position through film retry.
## 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": "aurora-flow",
"brand": "AURORA STUDIO",
"accent": "#b8adff",
"title": "Give the project its first direction",
"intro": "Choose the medium and describe the feeling the audience should leave with.",
"facts": [
[
"Starting point",
"Choose a focus, describe the audience and keep a scope brief."
],
[
"Review",
"Scope, supplied material, timing and the intended use."
],
[
"Handover to discuss",
"Motion tests, agreed film formats or a working web prototype, source and asset notes."
]
],
"groups": [
{
"label": "Project focus",
"options": [
{
"title": "Motion identity",
"detail": "A title sequence or brand film, with a coherent type, colour and sound direction."
},
{
"title": "Interactive experience",
"detail": "A browser-based visual experience with a prototype, motion alternatives and a performance review."
}
]
}
],
"brief": "Describe the audience, the intended result, the material you already have and any timing constraints.",
"notes": [
"This is a local project brief. Scope, availability and any fee would be agreed in a separate conversation."
],
"paper": "#101019",
"ink": "#f4f1eb",
"colorScheme": "dark"
}
- 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.