枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空の映像スタジオCOLD OPEN。6作品の元動画を直接VideoTextureとして描き、ノイズ境界のワイプで切り替える。全体フレームの動画鑑賞、作品に基づく相談、停止・読み込み失敗時の復帰を備える。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Create COLD OPEN, a fictional film and motion studio, as a complete responsive website. Use Three.js and GSAP/ScrollTrigger. Every selected work, film and project action must function.
ART DIRECTION
Warm paper #fdfcfa, ink #111, quiet rules rgba(17,17,17,.17), muted copy #69655f. Use burnt orange #b73713 for small interactive text; vivid #FF4D21 is the identity accent. A high-contrast Fraunces-like serif for headings and work titles, a restrained sans for navigation and notes. Use actual font assets and retain their licences. Editorial spacing, square film frames, generous margins, no decorative badges, invented awards or client metrics. Hero: “Start with a feeling.” with “Moving image. A considered cut.” beside it. Body headings: “A little less. A lot more felt.”, “Every cut, indexed.”, “Four passes. One clear direction.” and “What should it feel like?”
SOURCE FOOTAGE — DO NOT SUBSTITUTE THE MOVEMENT
Six local 960 × 600, 24 fps, approximately 10-second silent H.264 videos exist at /video/demos/reel-shift/slide-01.mp4 through slide-06.mp4. Their posters are real frames, looked up from src/data/site-video-posters.json. Obtain these actual assets from the project for a faithful reproduction; copying this description alone does not provide them. Do not replace them with a panning still or call generated substitutes the same work. They are AI-generated concept studies, not commissioned client films.
[01] Afterlight / Title sequence
A pale horizon opens beneath a moving curtain of green light.
Direction: A long opening hold, a clear horizon and space for a title to arrive.
Use: An opening sequence or a quiet campaign introduction.
[02] Low Tide / Landscape study
Water, reflection and a low horizon hold the frame together.
Direction: Let the movement in the landscape set the pace of the cut.
Use: A destination film or an atmospheric editorial opening.
[03] Monsoon Fold / Fashion film
A dark silhouette moves through rain and reflected city light.
Direction: Keep the figure grounded while warm and cool light carries the mood.
Use: A fashion introduction or a short campaign interlude.
[04] Static Hours / Music visual
Electronic light and image texture become the subject of the frame.
Direction: Use interruptions and changes in luminance as editorial punctuation.
Use: A music visual or an interstitial between live segments.
[05] Blackout Fog / Atmosphere study
Fog softens the distance and leaves room for the eye to search.
Direction: Build anticipation through a restrained palette and slow disclosure.
Use: A cinematic brand introduction or a scene-setting transition.
[06] Ink & Echo / Live visual
Dark ink branches and folds through a silver-grey field.
Direction: Follow the shape of the ink; leave the frame free of competing detail.
Use: A performance backdrop or an abstract title treatment.
THE REEL
8:5 stage, up to 960 CSS pixels wide, bounded by the available container width. Adjacent still-frame peeks are buttons, not active videos. Below the stage, place an honest loading/failure/paused caption, Retry preview when needed and Open film. Always show the active title and category, including mobile. Six numbered buttons have a minimum 44px target, aria-current and work names. Previous/next arrows and a horizontal swipe exceeding 64px choose the work; require horizontal movement to exceed vertical movement by a factor of 1.4, ignore non-primary buttons, cancel safely and retain touch-action:pan-y. Loading or GPU failure must not disable work selection or the native film viewer.
DIRECT VIDEO TEXTURES
Use Three.VideoTexture for video and Three.Texture for actual poster images. Do not redraw the video into a 640×400 intermediate canvas; preserve the source dimensions, frame and grade. No extra Ken Burns crop or changes baked into the original files. Apply only the lightweight live shader finish below. Decode sRGB video samples explicitly with sRGBTransferEOTF; still textures use SRGBColorSpace and hardware decoding. Blend in linear space, then use colorspace_fragment for the output. Check shader compilation, context loss and the first draw after every resize.
Preserve the reel's custom noisy displacement wipe: two sampler2D uniforms, uProgress 0..1, uDirection ±1 and continuous uTime. Value-noise at uv*3 + time*.15 shifts a directional boundary by ±.09. Remap progress to [-.30,1.30], smoothstep around the boundary with width .12, and displace A/B in opposite directions by sin(progress*pi)*.16. Interpolate progress with cubic ease-in-out over .9 seconds. Within the wipe band 4×edge×(1−edge), use three directional taps per source at −2/0/+2 decoded-source pixels with .25/.5/.25 weights and a .35 mix of R from the forward tap / B from the rear tap. Outside that band retain the original samples. Decode every extra video sample with sRGBTransferEOTF before blending. At each endpoint only the intended texture is visible. After sRGB output conversion add centred hash(gl_FragCoord.xy+uTime) grain with peak-to-peak amplitude 1.5/255 and corner-only vignette .08; the same held clock freezes grain on pause. Keep the existing entry darken limit .35; do not add a renderer tone map, mipmaps for video or a postprocessing pass. Reduced/stopped motion commits the requested work immediately. Rapid selection honours the latest request and retains only the outgoing and incoming slots. Do not run an entry that obscures the first frame.
RESOURCE OWNERSHIP AND RECOVERY
Prepare a renderer only while its stage is visible. Release renderer, textures and decoders when the stage leaves the viewport or document becomes hidden. Preserve each source's viewed time for restoration. At most two video decoders belong to the transition; off-stage works and neighbour peeks do not play. Load each poster independently; a missing neighbour must never hold the entire reel behind a loading screen. Attach video URLs only for required motion or a stored frame restoration. Limit decoding waits to 12 seconds, pause on rejected play/error, keep an available real poster and show Retry preview. Ignore late completions after disposal; stop media when motion is paused or a dialog opens. At rest draw only when source data, layout or the selected work changes. DPR cap 1.5, embed cap 1: 960×600 footage does not gain source detail from a higher cap. Preserve original full-site footage and use the existing preview media mapping only for embeds.
WORKS AND NATIVE VIEWER
Six list rows are full-width native buttons, with title, category and View film; categories remain on a second line on narrow screens. Open a native dialog with sticky previous/next/Close controls. Start the actual 960×600 film paused with native controls, playsInline and preload=metadata; show its full frame with object-fit:contain and maximum 65dvh height. Allow native seeking and fullscreen. Only the opened film receives a source. Bound loading/rebuffering waits, retry at the last viewed time in a paused state, and release the video on close. Give the dialog an accessible heading, initial focus, Escape dismissal and return focus to its original opener. Show the selected work's editorial direction, possible use and source provenance. “Use this direction in a brief” closes the work dialog and opens the existing project planning flow, carrying that work's name, category and direction into the review and text download.
PAGE AND MOTION
Sticky navigation retains Work 06, Process, Start a project and Pause/Resume motion on desktop and mobile. Use a real h1. Navigation goes to the appropriate section and focuses it below the measured sticky header. Honour live prefers-reduced-motion changes by stopping continuous motion, not merely slowing it. The four process passes cover the brief, assembly, finish and delivery. No fake social links or invented staff count. Footer Plan an edit carries the current reference into the same functioning two-option project planner.
A restrained five-strip film-gate reveal is reserved for section headings and list rows, .5 seconds with .045-second stagger, once on entry. Content is visible by default and when focused. Reduced motion, manual pause and modal viewing reveal all content immediately. Prefer readable 14–16px body text, visible keyboard focus, stacked mobile navigation, and native page scrolling on touch. Keep site styles and film resources out of unrelated initial routes. Verify actual GPU colour, device playback, keyboard/touch, responsive and zoomed layouts separately from unit tests; source assertions are not visual acceptance.
## 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.
Use at most two direct VideoTextures: the current reel and a pending destination. Neighbours are still images with working selection buttons. Load posters independently, preserve the original 960×600 frames without an intermediate downscale and decode video sRGB before blending. Keep rail, arrows, work list and native film viewer usable through preview failure. Use a 12-second deadline and explicit Retry preview, preserving the chosen work and viewed times. The native film dialog loads one original film with preload=metadata and starts paused; its retry retains position.
## 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": "reel-shift",
"brand": "COLD OPEN",
"accent": "#b73713",
"title": "Start on frame one",
"intro": "Give the edit a purpose before giving it a running time.",
"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",
"Review cuts, the agreed master formats, captions where required and an asset inventory."
]
],
"groups": [
{
"label": "Project focus",
"options": [
{
"title": "Film & title sequence",
"detail": "An editorial direction, assembly, finishing and agreed delivery formats."
},
{
"title": "Campaign & live visual",
"detail": "A family of cuts or loops with a consistent grade and format plan."
}
]
}
],
"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": "#fdfcfa",
"ink": "#111111"
}
- 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.