Merge pull request #8 from donny-son/claude/paper-design-shaders-a8grde

Add liquid-glass pause/play control to shader preview

Author: donny-son

src/App.tsx

@@ -38,6 +38,7 @@ import {
 import type { GradientType } from './lib/gradients';
 import { WallpaperCanvas } from './components/WallpaperCanvas';
 import { ShaderBackground } from './components/ShaderBackground';
+import { GlassTransportButton } from './components/GlassTransportButton';
 import { SHADER_DEFS, buildAllDefaultParamValues, getShaderDef } from './lib/shaders';
 import type { ShaderKind } from './lib/shaders';
 import { captureShaderSnapshot } from './lib/exportShader';
@@ -116,6 +117,7 @@ export default function App() {
   const [shaderScale, setShaderScale] = useState(1);
   const [shaderParams, setShaderParams] = useState(buildAllDefaultParamValues);
   const [isExporting, setIsExporting] = useState(false);
+  const [isShaderPaused, setIsShaderPaused] = useState(false);
   const [device, setDevice] = useState<DeviceType>('desktop');
   const [grainScale, setGrainScale] = useState(10);
   const [bandWidth, setBandWidth] = useState(0);
@@ -776,9 +778,13 @@ export default function App() {
                 kind={shaderKind}
                 colors={colors}
                 paramValues={shaderParams[shaderKind]}
-                speed={shaderSpeed}
+                speed={isShaderPaused ? 0 : shaderSpeed}
                 scale={shaderScale}
               />
+              <GlassTransportButton
+                isPaused={isShaderPaused}
+                onToggle={() => setIsShaderPaused((prev) => !prev)}
+              />
             </div>
           )}
 

src/components/GlassTransportButton.tsx

@@ -0,0 +1,22 @@
+import { Pause, Play } from 'lucide-react';
+
+interface GlassTransportButtonProps {
+  isPaused: boolean;
+  onToggle: () => void;
+}
+
+export function GlassTransportButton({ isPaused, onToggle }: GlassTransportButtonProps) {
+  return (
+    <div className="glass-transport">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="glass-transport-btn"
+        aria-label={isPaused ? 'Play shader animation' : 'Pause shader animation'}
+        aria-pressed={isPaused}
+      >
+        {isPaused ? <Play size={20} fill="currentColor" /> : <Pause size={20} fill="currentColor" />}
+      </button>
+    </div>
+  );
+}

src/index.css

@@ -700,6 +700,65 @@ input[type="range"]::-moz-range-thumb {
   background: var(--color-ink);
 }
 
+/* ---- Liquid glass shader transport control ---- */
+
+.glass-transport {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  z-index: 3;
+  transform: translateX(-50%);
+}
+
+.glass-transport-btn {
+  position: relative;
+  display: flex;
+  height: 52px;
+  width: 52px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(14px) saturate(180%);
+  -webkit-backdrop-filter: blur(14px) saturate(180%);
+  color: rgba(255, 255, 255, 0.92);
+  box-shadow:
+    0 8px 24px rgba(15, 15, 20, 0.35),
+    inset 0 1px 1px rgba(255, 255, 255, 0.65),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+  overflow: hidden;
+}
+
+.glass-transport-btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%);
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.glass-transport-btn svg {
+  position: relative;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
+}
+
+.glass-transport-btn:hover {
+  transform: scale(1.06);
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.glass-transport-btn:active {
+  transform: scale(0.96);
+  box-shadow:
+    0 4px 12px rgba(15, 15, 20, 0.3),
+    inset 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
 /* ---- Caption placard under the canvas ---- */
 
 .preview-status {