Build "Lock Jelly." — a single self-contained HTML file (WebGPU + WGSL, no libraries, no network, works from file://), part of a "Material Studies" series of jelly dioramas. If WebGPU is missing or the adapter fails, show a clean fallback card instead of the scene.
CONCEPT
A square block of clear coloured jelly (about 5.2 × 5.2 units, ~2 units high) holding a little English canal scene. The canal runs along the FRONT edge of the block, so the block's front face cuts the water lengthways: you see the lock chamber in cross-section, the water inside it rising and falling between the gates, fish swimming, the boat's hull below the waterline. All cut faces show candy-coloured soil strata; under the pounds a blue-grey puddle-clay lining, under the chamber a brick invert on a concrete bed, under the fields brown earth and turf.
LAYOUT (left to right along the front)
- Upper pound on the left at the higher level, opening into a round winding hole (a bay for turning boats); near the lock it narrows between brick wing walls.
- The lock chamber in the middle: brick walls with dressed-stone quoins and coping, a slimy band between the two water levels and weed below, an iron ladder, a gauge board, a stone cill under the top gate, recesses that the open gates fold into.
- Below the bottom gate a short walled tail, then the lower pound bends away from the front face, runs under a humpback brick bridge into a basin with a willow-covered island, lily pads in its corners and a sunken bicycle on the bed.
- The ground steps down from an upper terrace to a lower one along a grassy bank.
- Behind the lock: stone setts around the chamber, bollards, a gravel towpath, a lane, the keeper's whitewashed cottage with a slate roof, green door, picket-fence garden full of flowers and washing flapping on a line, a gas lamp, a bench, a white windmill with turning lattice sails, oaks, willows, poplars, a hedge, sheep, reeds on the soft banks.
WATER
- Linear shallow-water waves on a staggered grid (~168²) with a little surface tension, so short ripples are springy like jelly; damping and firmness are adjustable.
- Three separate bodies of water — upper pound, chamber, lower pound — each with its own rest level. Faces between bodies stay shut unless the gate between them is open and the levels are equal. The chamber's level is moved bodily when paddles are drawn (Torricelli-style flow), with boils, white water and a dimple at the intake.
- Rendering: refraction of the scene behind, flavour-coloured absorption, sun caustics on the bed, soft light shafts, foam (wakes, paddle churn), a meniscus line on the cut faces. Split the surface mesh along the gate lines so the step in level at a shut gate is a clean wall hidden by the gate leaf, not a ramp.
- The block itself can be tipped by dragging its side; the jelly shears and wobbles, the water sloshes, and it settles back.
THE LOCK AND THE KEEPER
- Two single-leaf timber gates (planks, rails, diagonal brace, iron straps, a walkway with a handrail), each with a white balance beam with black bands. Ground-paddle pedestals with toothed racks that rise when wound.
- An articulated lock keeper (flat cap, navy jumper, cords, windlass in hand; torso, arms, thighs and shins as separate parts). He walks with a proper gait, plans his route around the bench, pedestals, bollards and any beam lying across his way (going round the beam's end), leans his back on a beam and walks it round backwards to swing a gate, winds the windlass with his arm circling the spindle, and sits on his bench between jobs. He sets off for the gate as the boat comes in.
- The cycle: the boat lies in the full chamber → keeper shuts the top gate → winds up the bottom paddles → the chamber empties into the tail with white water → winds them down → opens the bottom gate → the boat leaves, runs the tail, swings round the bend, ducks under the bridge, goes round the island and comes back into the chamber bow first → shut bottom gate → round to the top paddles → chamber fills with boils → open the top gate → the boat goes up the pound, turns in the winding hole and comes back. Repeat forever. A gate may only open when the levels match.
BOATS
- A traditional narrowboat "Wobble": black lofted hull, a green cabin with red lining-out, brass portholes, a cratch board and cover at the bow, a chimney with brass bands (puffing smoke), a painted Buckby can, plank and pole on the roof, rope fenders, a headlamp, a brass swan-neck tiller and a steerer in a red jumper. It follows smooth filleted routes (check the stern never swings out through the block's face), slows near the gates, heaves, pitches and rolls on the local surface, and hands its displaced volume back to the water so it makes bow waves and wakes.
- Three moored narrowboats in the basin in different liveries with flowerpots on the roofs and one ginger cat, tied to bank pins with stretchy mooring lines.
LIFE
- Roach, perch and bream as boids that stay in their own body of water (they can only move between pound and chamber while a gate is open), under the surface and hulls, off the bed, scattering from the boat and splashes.
- Mallards (drakes, ducks) and a duck with four ducklings that follow exactly along her trail; a pair of mute swans in the basin. They paddle the surface, ride the chamber down and up, upend now and then, get out of the boat's way and come for bread.
- A grey heron that wades in the shallows or stands on a moored boat's roof, stabs at fish (sometimes catching one), and flaps off somewhere quieter when the boat passes or someone toots.
- Chimney smoke from the boat and the cottage.
UI (editorial, like a print magazine)
- Top-left: small caps eyebrow "MATERIAL STUDIES", a huge italic serif title "Lock / Jelly.", a short subtitle. Top-right: a status pill "WebGPU · Live / Paused / Unavailable".
- Right: a frosted-glass control panel (a bottom sheet on mobile) with: buttons Hurry (speeds the keeper, paddles and boat), Toot (horn; also Space), Throw bread, Rubber duck (drops a yellow rubber duck that floats upright, can be picked up and thrown, rides the lock, is stopped by gates and shoved by boats); a liveliness meter; tallies Trips · Lockfuls · Fed; a status line "Wobble — Emptying the lock 62%" telling the story step by step; three flavours Greengage, Elderflower, Blackcurrant (change the water colour/absorption and strata); sliders Firmness, Wave damping, Paddle speed; Reset, Pause, Sound on/off, View.
- Bottom-left: "How to play — Throw bread. Toot the horn. Hurry the keeper." with a small line of instructions.
- Interaction: drag across the water to make waves, drag the block's side to tip it, pick up and throw rubber ducks, drag empty space to orbit, scroll/pinch to zoom; touch works.
- Soft studio lighting on a warm paper backdrop with the block's tinted, caustic-flecked shadow; WebAudio sounds: the boat's horn, the gate thudding shut, a creak, the windlass ratchet, and the rush of water that swells with the flow.
QUALITY
Keep it smooth (fixed-step physics, cheap per frame), no console errors, no page scroll, works at phone width. Test it headlessly: a full round trip happens, levels go exactly from upper to lower and back, no gate opens across a step, the keeper never walks into the water or through obstacles, the boat never touches a gate leaf, and every button works.
한국어 번역
"Lock Jelly."를 만들어라. — 단 하나의 자체 완결형 HTML 파일(WebGPU + WGSL, 라이브러리 사용 금지, 네트워크 사용 금지, file://에서 동작)이며, 젤리 디오라마 시리즈인 "Material Studies"의 일부다. WebGPU가 없거나 어댑터가 실패하면 장면 대신 깔끔한 폴백 카드를 보여라.
컨셉
맑은 색 젤리의 정사각형 블록(약 5.2 × 5.2 단위, 높이 ~2 단위) 안에 작은 영국 운하 장면이 들어 있다. 운하는 블록의 앞쪽 모서리를 따라 흐르므로, 블록의 앞면이 물을 세로로 자른다. 즉 갑문실을 단면으로 보게 되고, 그 안의 물이 갑문 사이에서 오르내리며, 물고기가 헤엄치고, 흘수선 아래로 배의 선체가 보인다. 모든 절단면에는 캔디 색 토양 지층이 보인다. 수면 구간 아래에는 청회색 퍼들 클레이 라이닝, 갑문실 아래에는 콘크리트 바닥 위의 벽돌 인버트, 들판 아래에는 갈색 흙과 잔디가 있다.
레이아웃 (앞쪽을 따라 왼쪽에서 오른쪽으로)
- 왼쪽의 상류 수면 구간은 더 높은 수위에 있고, 배를 돌리는 만인 둥근 와인딩 홀로 이어진다. 갑문 근처에서는 벽돌 날개벽 사이로 좁아진다.
- 가운데의 갑문실: 다듬은 돌 모서리돌과 갓돌이 있는 벽돌 벽, 두 수위 사이의 미끈거리는 띠와 그 아래의 수초, 철 사다리, 수위 표지판, 상류 갑문 아래의 돌 문턱, 열린 갑문이 접혀 들어가는 홈.
- 하류 갑문 아래에는 짧은 벽으로 둘러싸인 테일이 있고, 그다음 하류 수면 구간이 앞면에서 벗어나 휘어져 혹등 벽돌 다리 아래를 지나, 버들이 덮인 섬이 있는 정박지로 흘러든다. 정박지 모서리에는 수련 잎이 있고 바닥에는 가라앉은 자전거가 있다.
- 지면은 풀이 무성한 둑을 따라 위쪽 테라스에서 아래쪽 테라스로 단차지며 내려간다.
- 갑문 뒤쪽: 갑문실 주위의 돌 포장 블록, 계선 기둥, 자갈 견인로, 오솔길, 슬레이트 지붕과 초록색 문이 있는 회칠한 관리인 오두막, 꽃이 가득하고 빨랫줄에 빨래가 펄럭이는 피켓 울타리 정원, 가스등, 벤치, 격자 날개가 돌아가는 흰색 풍차, 참나무, 버드나무, 포플러, 산울타리, 양, 부드러운 둑의 갈대.
물
- 엇갈린 격자(~168²) 위의 선형 천해파에 약간의 표면 장력을 더해, 짧은 잔물결이 젤리처럼 탄력 있게 한다. 감쇠와 단단함은 조절할 수 있다.
- 세 개의 분리된 수체 — 상류 수면 구간, 갑문실, 하류 수면 구간 — 각각 고유의 정지 수위를 가진다. 수체 사이의 경계면은 그 사이의 갑문이 열려 있고 수위가 같을 때만 열린다. 패들을 당기면 갑문실의 수위가 통째로 이동하며(토리첼리식 흐름), 취수구에는 솟구침과 흰 물보라, 오목한 자국이 생긴다.
- 렌더링: 뒤쪽 장면의 굴절, 맛에 따른 색 흡수, 바닥의 태양 코스틱, 부드러운 빛줄기, 거품(항적, 패들 휘젓기), 절단면의 메니스커스 선. 수면 메시를 갑문 선을 따라 분할하여, 닫힌 갑문에서의 수위 단차가 경사로가 아니라 갑문 잎에 가려진 깔끔한 벽이 되게 하라.
- 블록 자체는 옆면을 드래그해 기울일 수 있다. 젤리가 전단되며 흔들리고, 물이 출렁이며, 다시 가라앉는다.
갑문과 관리인
- 두 개의 외짝 목재 갑문(널빤지, 가로대, 대각 버팀대, 철 띠, 난간이 있는 통로), 각각 검은 띠가 있는 흰색 균형 빔이 있다. 지상 패들 받침대에는 감아 올리면 올라오는 톱니 랙이 있다.
- 관절로 움직이는 갑문 관리인(플랫 캡, 네이비 점퍼, 코듀로이 바지, 손에 윈들래스; 몸통, 팔, 허벅지, 정강이는 별도 부품). 그는 자연스러운 걸음걸이로 걷고, 벤치·받침대·계선 기둥·길을 가로지르는 빔을 피해 경로를 계획하며(빔 끝을 돌아서 간다), 빔에 등을 기대고 뒤로 돌면서 갑문을 밀어 열고, 팔로 축을 감아 윈들래스를 돌리며, 일 사이사이 벤치에 앉는다. 배가 들어오면 갑문으로 출발한다.
- 순환: 배가 가득 찬 갑문실에 있다 → 관리인이 상류 갑문을 닫는다 → 하류 패들을 감아 올린다 → 갑문실이 흰 물보라와 함께 테일로 비워진다 → 패들을 감아 내린다 → 하류 갑문을 연다 → 배가 떠나 테일을 지나 굽은 길을 돌아, 다리 아래를 지나 섬을 돌아 뱃머리부터 갑문실로 돌아온다 → 하류 갑문을 닫는다 → 상류 패들로 간다 → 갑문실이 솟구침과 함께 채워진다 → 상류 갑문을 연다 → 배가 상류 수면 구간으로 올라가 와인딩 홀에서 돌고 돌아온다. 영원히 반복한다. 갑문은 수위가 일치할 때만 열릴 수 있다.
배
- 전통적인 내로우보트 "Wobble": 검은 로프트 선체, 붉은 라이닝이 있는 초록 선실, 놋쇠 원창, 뱃머리의 크래치 보드와 덮개, 놋쇠 띠가 있는 굴뚝(연기를 퍼프퍼프 내뿜음), 도색된 Buckby 캔, 지붕 위의 널빤지와 장대, 밧줄 범퍼, 전조등, 놋쇠 백조 목 타일러, 빨간 점퍼를 입은 조타수. 배는 부드러운 필렛 경로를 따르고(선미가 블록 면 밖으로 절대 휘지 않는지 확인), 갑문 근처에서 속도를 줄이며, 국소 수면에서 상하로 뜨고, 종으로 기울고, 옆으로 구르며, 밀어낸 부피를 물에 되돌려 뱃머리 파도와 항적을 만든다.
- 정박지에 서로 다른 도색으로 정박한 내로우보트 세 척, 지붕에는 화분이 있고 생강색 고양이 한 마리가 있으며, 신축성 있는 계류줄로 둑 말뚝에 묶여 있다.
생명
- 로치, 퍼치, 브림을 보이드로 구현하며 각자 자신의 수체에 머문다(갑문이 열려 있을 때만 수면 구간과 갑문실 사이를 이동할 수 있다). 수면과 선체 아래, 바닥 위를 다니며 배와 물보라를 피해 흩어진다.
- 청둥오리(수컷, 암컷)와, 네 마리 새끼오리가 정확히 어미의 궤적을 따라오는 새끼 딸린 암컷 한 마리, 정박지에는 흰고니 한 쌍. 이들은 수면을 발로 젓고, 갑문실을 따라 내려갔다 올라오며, 때때로 머리를 물속에 처박고, 배를 피해 비켜 가고, 빵을 얻으러 온다.
- 얕은 곳을 거닐거나 정박한 배 지붕에 서 있는 회색 왜가리. 물고기를 쪼아 잡고(때때로 한 마리를 잡는다), 배가 지나가거나 누군가 경적을 울리면 더 조용한 곳으로 날아간다.
- 배와 오두막의 굴뚝 연기.
UI (인쇄 잡지 같은 편집 디자인)
- 왼쪽 상단: 작은 대문자 아이브로우 "MATERIAL STUDIES", 거대한 이탤릭 세리프 제목 "Lock / Jelly.", 짧은 부제. 오른쪽 상단: 상태 필 "WebGPU · Live / Paused / Unavailable".
- 오른쪽: 반투명 유리 컨트롤 패널(모바일에서는 하단 시트)에 다음이 있다. 버튼 Hurry(관리인, 패들, 배의 속도를 높임), Toot(경적; Space 키도 가능), Throw bread, Rubber duck(똑바로 떠 있는 노란 고무오리를 떨어뜨리며, 집어 던질 수 있고, 갑문을 타고, 갑문에 막히고, 배에 밀린다); 활기 게이지; 집계 Trips · Lockfuls · Fed; 이야기를 단계별로 알려주는 상태 줄 "Wobble — Emptying the lock 62%"; 세 가지 맛 Greengage, Elderflower, Blackcurrant(물 색/흡수와 지층을 바꾼다); 슬라이더 Firmness, Wave damping, Paddle speed; Reset, Pause, Sound on/off, View.
- 왼쪽 하단: "How to play — Throw bread. Toot the horn. Hurry the keeper."와 작은 안내 문구 한 줄.
- 상호작용: 물 위를 드래그해 파도를 만들고, 블록 옆면을 드래그해 기울이고, 고무오리를 집어 던지고, 빈 공간을 드래그해 궤도 회전하고, 스크롤/핀치로 확대·축소한다. 터치도 동작한다.
- 따뜻한 종이 배경 위의 부드러운 스튜디오 조명, 블록의 색조가 깃들고 코스틱이 점점이 박힌 그림자; WebAudio 사운드: 배의 경적, 갑문이 쿵 닫히는 소리, 삐걱임, 윈들래스 래칫, 그리고 흐름에 따라 커지는 물소리.
품질
부드럽게 유지하라(고정 스텝 물리, 프레임당 저비용). 콘솔 오류가 없어야 하고, 페이지 스크롤이 없어야 하며, 휴대폰 너비에서 동작해야 한다. 헤드리스로 테스트하라: 완전한 왕복이 일어나고, 수위가 정확히 상류에서 하류로 갔다가 다시 돌아오고, 수위 단차를 넘어 열리는 갑문이 없고, 관리인이 물에 들어가거나 장애물을 통과하지 않으며, 배가 갑문 잎에 닿지 않고, 모든 버튼이 동작한다.
