{"repo":"coderomm/jelly-slider","free":true,"listed":false,"github":"https://github.com/coderomm/jelly-slider","clone":"git clone https://github.com/coderomm/jelly-slider.git","description":null,"language":"TypeScript","stars":25,"topics":["nextjs","raymarching","react","sdf","typegpu","webgpu","shader","webgl","shader-demo","interactive-animation"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Jelly Slider A WebGPU-powered interactive jelly slider component built with TypeGPU, featuring real-time raymarched SDF rendering, physics-based animation, and TAA. Credits The original jelly slider concept and implementation are by Voicu Apostol (original post). This repository is a Next.js port and reorganization of that work; the core rendering and physics logic are derived from it. Tech stack - Next.js (App Router) – demo app - TypeGPU – WebGPU abstraction and shader authoring - @typegpu/sdf – SDF primitives and operations - React – optional React wrapper component Running the demo Open http://localhost:3000. The jelly slider runs in the browser and requires WebGPU support (Chrome, Edge, or other Chromium-based browsers). Using the component in your project In a Next.js app 1. Copy the src/jelly-slider folder into your project (e.g. under src/ or lib/ ). 2. Copy the React wrapper components/JellySlider.tsx (or implement your own that calls initJellySlider ). 3. Ensure path aliases resolve the jelly-slider entry (e.g. @/src/jelly-slider or equivalent). 4. Render the component in a client tree: Vanilla / no framework Use the canvas-based API: License MIT","default_branch":null,"files":null,"tree":[],"storefront":"/r/coderomm","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/coderomm/jelly-slider/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}