Интерактивный 3D-осьминог из прозрачного мармелада Octo Jelly на WebGPU, которого можно хватать, растягивать и мять

Промпт

Создайте “Octo Jelly” — красивого интерактивного 3D-осьминога из желе, которого пользователи могут хватать, растягивать и сжимать прямо в браузере. Предоставьте полноценный одностраничный HTML-интерфейс в одном файле с использованием настоящего WebGPU.
ХУДОЖЕСТВЕННОЕ НАПРАВЛЕНИЕ
Осьминог должен выглядеть как премиальная полупрозрачная желейная конфета: округлая голова, восемь закрученных щупалец, маленькие присоски и милое, неброское лицо.
Используйте тёплый почти белый фон, мягкое студийное освещение и лёгкую тень на поверхности. Сцена должна оставаться элегантной и незагромождённой, а осьминог — крупным и располагаться по центру.
ГЕОМЕТРИЯ И МАТЕРИАЛ

* Генерируйте всю геометрию процедурно. Не используйте внешние модели или файлы изображений.
* Плавно соедините все восемь щупалец с телом, без видимых зазоров или парящих частей.
* Добавьте округлые присоски, которые остаются прикреплёнными к щупальцам при их деформации.
* Используйте глянцевое полупрозрачное желе с зависящим от толщины поглощением цвета, преломлением, мягким внутренним рассеиванием света и деликатными бликами по краям.
* Толстые участки должны иметь более насыщенный цвет; тонкие кончики щупалец должны пропускать больше света.
* Избегайте непрозрачного пластика, пересвеченных бликов и видимых швов сетки.

ФИЗИКА МЯГКОГО ТЕЛА
Используйте стабильную систему на основе масс и пружин или позиционно-зависимой динамики с упругими ограничениями и приблизительным сохранением объёма.

* Голова должна ощущаться мягкой, но плотной.
* Щупальца должны быть более гибкими, чем голова, особенно ближе к кончикам.
* Позвольте пользователям хватать голову или любое щупальце в месте нажатия.
* При растягивании сначала должна деформироваться ближайшая геометрия, а затем упруго подтягиваться остальная часть тела.
* После отпускания осьминог должен покачиваться и постепенно возвращаться к исходной форме.
* Щупальца должны реагировать независимо друг от друга, с небольшой задержкой движения.
* Добавьте гравитацию, столкновения с полом, трение и демпфирование.
* Не допускайте прохождения щупалец сквозь пол.
* Ограничьте чрезмерное растяжение и используйте фиксированные шаги симуляции, чтобы сильные рывки не разрушали модель.
* Не имитируйте мягкость масштабированием или вращением всего осьминога.

ВЗАИМОДЕЙСТВИЕ

* Нажимайте левой кнопкой мыши или касайтесь осьминога, чтобы схватить и растянуть его.
* Перетаскивайте правой кнопкой мыши или пустое пространство, чтобы мягко вращать камеру вокруг объекта.
* Поддерживайте ограниченный диапазон масштабирования.
* Разделяйте жесты управления камерой и перетаскивание объекта.
* Добавьте кнопки “Give it a nudge,” “Reset,” “Pause” и “Reset view”.
* Добавьте ползунки Firmness и Internal damping.
* Добавьте переключатели “¼ speed” и “Show mesh”.
* Предоставьте три предустановки цвета: Coral, Lagoon и Grape. Меняйте цвета материала без сброса симуляции.

ИНТЕРФЕЙС
Используйте минималистичную редакционную компоновку:

* В левом верхнем углу: небольшая надпись “MATERIAL STUDIES”.
* Крупный курсивный заголовок с засечками: “Octo Jelly.”
* Подпись: “Eight arms. A little wobble. A very soft creature.”
* В правом верхнем углу: индикатор состояния WebGPU.
* Справа: компактная панель управления “THE SPECIMEN”.
* В левом нижнем углу: “Grab a tentacle. Pull gently. Let go.”

Используйте чистый текст без засечек для элементов управления, тонкие границы и большое количество свободного пространства. Избегайте массивных панелей и декоративных эффектов интерфейса.
ПРОИЗВОДИТЕЛЬНОСТЬ И КАЧЕСТВО

* Используйте настоящий рендеринг WebGPU, а не имитацию на 2D canvas или заранее записанную анимацию.
* Повторно используйте геометрию и буферы; не пересоздавайте сетки во время перетаскивания.
* Следите, чтобы присоски, глаза и другие детали оставались прикреплёнными к деформируемому телу.
* Обрабатывайте прозрачность без мерцания, исчезновения поверхностей и резких чёрных краёв.
* Поддерживайте компоновки для настольных и мобильных устройств.
* Показывайте понятное резервное сообщение, если WebGPU недоступен.
* Протестируйте повторные захваты, сильные растягивания, отпускания, столкновения с полом, смену палитры, паузу и сброс.

Результат должен ощущаться как маленькая живая желейная игрушка — глянцевая, мягкая, выразительная и приятная для растягивания. Предоставьте полностью рабочий HTML, а не макет или фрагмент кода.

Create “Octo Jelly” - a beautiful, interactive 3D gummy octopus that users can grab, stretch, and squish directly in their browser. Deliver a complete single-file HTML experience using genuine WebGPU.
ART DIRECTION
Make the octopus look like a premium translucent gummy candy: a rounded head, eight curled tentacles, small suction cups, and a cute, understated face.
Use a warm off-white background, soft studio lighting, and a subtle ground shadow. Keep the scene elegant and uncluttered, with the octopus large and centered.
GEOMETRY AND MATERIAL

* Generate all geometry procedurally. No external models or image files.
* Connect all eight tentacles smoothly to the body, without visible gaps or floating parts.
* Add rounded suction cups that stay attached as the tentacles deform.
* Use glossy, translucent jelly with thickness-dependent color absorption, refraction, soft internal light scattering, and delicate rim highlights.
* Thick areas should have richer color; thin tentacle tips should transmit more light.
* Avoid opaque plastic, blown-out highlights, and visible mesh seams.

SOFT-BODY PHYSICS
Use a stable mass-spring or position-based dynamics system with elastic constraints and approximate volume preservation.

* The head should feel soft but substantial.
* Tentacles should be more flexible than the head, especially near their tips.
* Allow users to grab the head or any tentacle at the clicked location.
* Pulling should deform the nearby geometry first, then elastically pull the rest of the body.
* On release, the octopus should wobble and gradually settle into its original shape.
* Tentacles should react independently, with slightly delayed motion.
* Include gravity, floor collisions, friction, and damping.
* Prevent tentacles from passing through the floor.
* Clamp extreme stretching and use fixed simulation steps so strong pulls do not break the model.
* Do not fake softness by scaling or rotating the entire octopus.

INTERACTION

* Left-click or touch the octopus to grab and stretch it.
* Right-drag or drag empty space to gently orbit the camera.
* Support a limited zoom range.
* Keep camera gestures separate from object dragging.
* Add “Give it a nudge,” “Reset,” “Pause,” and “Reset view” buttons.
* Include Firmness and Internal damping sliders.
* Add “¼ speed” and “Show mesh” toggles.
* Provide three color presets: Coral, Lagoon, and Grape. Change the material colors without resetting the simulation.

INTERFACE
Use a minimal editorial layout:

* Top left: small “MATERIAL STUDIES” label.
* Large italic serif heading: “Octo Jelly.”
* Caption: “Eight arms. A little wobble. A very soft creature.”
* Top right: a WebGPU status indicator.
* Right side: a compact “THE SPECIMEN” control panel.
* Bottom left: “Grab a tentacle. Pull gently. Let go.”

Use clean sans-serif text for controls, thin borders, and generous whitespace. Avoid heavy panels or decorative UI effects.
PERFORMANCE AND QUALITY

* Use real WebGPU rendering, not a 2D canvas imitation or prerecorded animation.
* Reuse geometry and buffers; do not rebuild meshes during dragging.
* Keep suction cups, eyes, and other details attached to the deforming body.
* Handle transparency without flickering, disappearing surfaces, or harsh black edges.
* Support desktop and mobile layouts.
* Show a clear fallback message if WebGPU is unavailable.
* Test repeated grabs, strong pulls, releases, floor collisions, palette changes, pause, and reset.

The result should feel like a little living gummy toy - glossy, squishy, expressive, and satisfying to stretch. Deliver the full working HTML, not a mockup or a code fragment.