Interactive deform effect with bounce (#223)

* Interactive deform effect with bounce * Added bounce speed control to interactive deform effect
2026-10-16 00:03:01 +00:00 · 2025-11-18 15:53:02 -03:00
parent c9c488c70f
commit 937262b3ae
2 changed files with 367 additions and 0 deletions
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spark • Splat Experiment</title>
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+      font-family: Arial, sans-serif;
+      background: #000;
+    }
+    header {
+      position: absolute;
+      color: silver;
+      font-family: sans-serif;
+      padding: 12px 16px;
+      text-align: left;
+      width: 100vw;
+      pointer-events: none;
+      text-shadow: 
+        2px 2px 4px rgba(0, 0, 0, 0.8),
+        -1px -1px 2px rgba(0, 0, 0, 0.6),
+        1px -1px 2px rgba(0, 0, 0, 0.6),
+        -1px 1px 2px rgba(0, 0, 0, 0.6);
+      -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);
+    }
+  </style>
+</head>
+
+<body>
+  <header>Click and drag on the penguin to deform it • Release to see elastic bounce • A/D to rotate • W/S to zoom • Adjust parameters with GUI controls</header>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "/examples/js/vendor/three/build/three.module.js",
+        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
+        "@sparkjsdev/spark": "/dist/spark.module.js",
+        "lil-gui": "/examples/js/vendor/lil-gui/dist/lil-gui.esm.js"
+      }
+    }
+  </script>
+  <script type="module" src="main.js"></script>
+</body>
+
+</html>
+