枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空のインタラクション工房「SLACKWORKS」。重り付きロープと原画を保つ立体の布を操作し、応答と制作範囲を比較して相談メモへ残す。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build SLACKWORKS, a fictional independent interaction-design studio. Try two physical responses, adjust their feel, compare prototype and production scopes, then review and save a project brief. Use English copy, React/TypeScript and Three.js. The supplied position-based simulation is illustrative, not a certified material simulation.
## Art direction and content
Use warm paper #e8e5dd, soft white #f7f5ef, ink #252724, muted #60655f, borders #c9c8bd and brass #8a6c3d. The original textile adds slate blue. Bundle actual Space Grotesk for headings/body and JetBrains Mono for labels with their licences. Body is 16–17px, line-height 1.65 and 32–52ch wide. Main headings reach 104px. Use 8/16/24/48/96px spacing and 20–64px outer margins. Text is visible initially and stays still.
The header contains the studio mark, Try the response, What we make, Start a project and Pause/Resume motion. In an asymmetric hero, the left column says “Feel / the / response.” and explains that digital objects can have a little give; the right contains one live stage with Suspension/Drape buttons. Follow with two horizontal study rows, a dark editorial section on Invitation/Response/Continuity, two scope comparisons and a large project-brief footer. At 780px stack columns, keep all navigation and let controls flow with the page. Avoid moving reading panels, invented testimonials, speculative delivery times and printed physics constants.
## Original assets and source handover
The six files in ../demo-assets/verlet-lab/ provide softWorld.ts, softVisual.ts, fabricSource.ts, an adjacent fabric-asset.json, the lossless original WebP and README. Copy source/src/demos/verlet-lab/ into the TypeScript project and img/ into the public root. Helpers use relative imports and Three.js; enable resolveJsonModule for the JSON import. These helpers are not the complete website.
Original uncropped artwork: /img/demos/verlet-lab/fabric-original-be41702d3bb0.webp, 1536×1024, 1,488,706 bytes, SHA-256 be41702d3bb0f810ed80803554783f0d69be689734b5a498f0319a36bde20b22. It preserves the decoded RGBA pixels of the existing generated PNG. Keep its complete artwork and UVs, not average-colour cells or a substitute texture. It is an illustration, not a commissioned textile photograph. Keep a labelled artwork reference or initial rope drawing visible until the live scene draws successfully.
## Two responses from one numerical source
Use softWorld.ts. Keep current and previous XYZ positions outside the GPU renderer. Accumulate elapsed time into fixed 1/120-second steps, at most eight per animation frame. Default weight 1, breeze 0.6, damping 0.992; bounds 0.2–1.5, 0–1.5 and 0.97–0.998. Present damping as Settling on a 0–100 scale, where higher values stop motion sooner.
Suspension uses 25 points, two fixed ends, a 4.4-unit rest-length cord and an eight-times-heavier middle point carrying the actual brass weight. Use 24 links and 12 alternating relaxation passes. Named grips: Left cord, Centre weight, Right cord. Explain product interactions, navigation and tactile selection. Ask where weight could make an interaction easier to understand.
Drape uses 24×16 cells, 425 points over a 3×2-unit surface, only upper corners pinned. Use structural links, both diagonals and weak second-neighbour bending links: 2,342 constraints with strengths 1/0.8/0.003 and 48 alternating passes. Gravity and spatially varying breeze act in 3D. Named grips: Lower left, Lower centre, Right edge. Explain textile stories, exhibition identities and interactive artwork. Ask which surface should respond to touch. No self-collision solver is included; do not promise exact physical folds.
Raycast the actual surface/weight and choose the nearest movable point. Bound a dragged target by the world and reachable distances from the pins. Limit held-point travel to 0.08 model units per step to resist pointer jumps. Release without an uncontrolled fling. Resize, mode switching and GPU disposal retain simulation state. Reset clears position/velocity but preserves response settings.
## Rendering and resource ownership
For fabric use MeshPhysicalMaterial roughness .92, metalness 0, sheen .4, sheenRoughness .8 and sheenColor #eee8dd. Add a 512² periodic over/under yarn normal DataTexture (16px yarn period), repeat 6×4 and normalScale .35; retain the exact 425 vertices, original image and UVs. Original and procedural textures use mipmaps and anisotropy at most 8. The rope has 16 radial segments, sphere end caps, roughness .7 with a 128² periodic roughness texture repeated 2×12. Anchors and weight use 64×32 spheres; supports use 64-sided cylinders. These are rendering details only; never alter the CPU world or decoded image ownership.
Use one antialiased Three.js WebGLRenderer, DPR at most 2 (1 for embedded preview), sRGB output and ACES filmic exposure 1.1. The orthographic camera is at (2.8,1.2,8), looking at (0,0.05,0); fit projected bounds to the actual aspect. Use dark metal supports, brass fixtures, paper floor, hemisphere and warm directional lighting, with 2048px PCFShadowMap (r185), radius 2, bias −.0002 and normalBias .02. Bake one RoomEnvironment PMREM per visual, intensity .45; dispose the room, generator and target. Brass anchors/weight use metalness 1, roughness .3; dark painted supports use MeshPhysicalMaterial roughness .6, clearcoat .25/.25. Keep key intensity 3 and hemisphere 1.4. Use a continuous 64×1024 dithered studio gradient #f3f1eb to #dedbd2 behind a 30×30 ShadowMaterial floor at y=−1.85, opacity .18 and depthWrite false, so the floor has no hard horizon. No screen-space AO or composer.
The cord uses a reusable ten-sided tube buffer. Map the original image directly onto indexed cloth geometry, upper UV edge v=1. Decode ImageBitmap using imageOrientation flipY, premultiplyAlpha none, colorSpaceConversion none; then Texture.flipY=false, sRGB and anisotropy up to 4. Recompute real surface normals as points move. Avoid an intermediate low-resolution canvas.
Start the image only when drape is visible and the document active. fabricSource.ts owns one decoded original, deduplicates starts, validates dimensions/bytes and sets a 12-second deadline covering download, blob and decode. Abort stale generations and close late bitmaps. The visible renderer borrows the bitmap and world; disposing its geometry, texture and context must not close the original or reset physics. Release GPU resources offscreen and recreate around saved state on return. Stop automatic steps for hidden documents, offscreen content, dialogs, manual pause and prefers-reduced-motion, including preference changes.
## Complete interaction and recovery
Provide study buttons, grip select, Pull left/Lift/Pull right, Advance a little, Reset simulation, and Tune the response with Quiet/Balanced/Breezy presets plus Weight/Breeze/Settling ranges. Pull buttons apply an impulse. Advance a little pauses and advances 12 fixed steps. Arrow keys nudge the focused stage; Home resets. In a paused study, only explicit operations advance the response. Preserve vertical touch scrolling until Enable touch handling is checked. Cancelled/lost pointer capture releases the grip and pauses.
Disable scene-dependent controls before the first successful draw while keeping settings, content and the brief. Failed download, decode, context creation or draw restores the static reference and a real Retry live study button. Retry pauses, retains settings and positions and focuses stable study controls. Do not show success for a missing visual. Clean up observers, listeners, frames, deadlines and GPU resources once.
## Scope comparison and brief
Interaction prototype includes one focused interaction, input/motion alternatives and a working browser prototype. Ask for the visitor's task and artwork/product. Production experience includes responsive implementation, performance/recovery work and source/operating notes. Ask for the agreed prototype, final content and supported environments. Each scope opens the real local brief with Scope set to Prototype or Production.
Every brief entry retains study, its planning question and current response settings. Require a meaningful project description, then review/save with honest copy/download feedback. This local flow does not send an enquiry. Keep the fictional studio disclosure.
## Acceptance
Verify fixed-step results, bounded strong pulls, retained position/velocity, image ownership and resource disposal. Then inspect actual GPU folds, texture orientation, mobile layout, 200% zoom, inputs, motion preference, retry and full review/save in target browsers. CPU pictures and injected renderer tests are diagnostic evidence; they do not establish visual quality or identical reproduction.
## 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": "verlet-lab",
"brand": "SLACKWORKS",
"accent": "#8a6c3d",
"paper": "#e8e5dd",
"ink": "#252724",
"colorScheme": "light",
"title": "Give your project a starting point",
"intro": "Tell us what should move, what the visitor needs to do, and where the experience will live. Save a scope brief for a productive first conversation.",
"facts": [
[
"Work",
"Interactive websites, physical simulations and creative prototypes"
],
[
"Process",
"Discovery → prototype → production → handover"
],
[
"Handover",
"Source, asset inventory, performance notes and operating guide"
]
],
"groups": [
{
"label": "Scope",
"options": [
{
"title": "Prototype",
"detail": "One focused interaction, input and motion alternatives, and a working browser prototype."
},
{
"title": "Production",
"detail": "Responsive implementation, performance and recovery work, source and operating notes."
}
]
}
],
"brief": "What are you making, who will use it, and what should they be able to complete?",
"notes": [
"Scope and schedule follow the visitor’s task and the available content. This local brief is not a submitted enquiry; save it to keep the reference response and your answers."
]
}
- 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.