Jelly Sheet: Interactive Web Physics Simulation
A technical exploration of fluid motion and interactive web-based physics rendering.
1Interactive Physics Demonstration
The Jelly Sheet project, hosted on the Codevember 2026 repository, showcases a dynamic physics simulation within a browser environment. Developed by Mr.doob, the project focuses on fluid-like geometry manipulation. It provides a real-time interactive experience that highlights advanced rendering capabilities, allowing users to engage directly with the simulated physical properties of the sheet.
2Codevember Event Context
Codevember serves as a platform for developers to push the boundaries of creative coding throughout the month of November. This specific entry, labeled as the first project of the series, emphasizes the intersection of aesthetic design and functional engineering. It demonstrates how lightweight web technologies can handle complex mathematical models for visual output.
3Technical Rendering Framework
The simulation utilizes browser-native rendering techniques to achieve its jelly-like behavior. By manipulating vertex data in real-time, the project achieves a high degree of responsiveness to user input. This approach avoids heavy external dependencies, relying instead on efficient JavaScript execution to maintain a smooth frame rate during the interactive physics calculations.
4Geometry and Material Properties
The core of the Jelly Sheet involves a grid-based mesh that responds to cursor interactions. Each point within the sheet is governed by spring-like constraints, creating the characteristic wobbling effect. These parameters are tuned to simulate low-friction surfaces, ensuring that the visual feedback remains consistent with the intended fluid-like physical behavior of the object.
5User Interaction Mechanics
Interaction is facilitated through mouse or touch events that exert force on the mesh vertices. As the user moves their cursor across the screen, the sheet deforms in response to the applied vectors. This direct manipulation highlights the precision of the underlying physics engine in calculating displacement and restoring forces for every frame.
6Performance Considerations
Maintaining performance in browser-based physics requires careful management of the update loop. The Jelly Sheet implementation minimizes overhead by optimizing the calculation of vertex positions. By limiting the complexity of the mesh grid, the simulation remains performant across various devices, demonstrating the viability of complex visual effects in standard web browsers.
7Design and Engineering Synergy
This project exemplifies the synergy between design-led creative coding and robust engineering practices. While the visual output is purely aesthetic, the underlying logic requires a solid understanding of vector math and coordinate systems. It serves as a practical case study for developers looking to integrate interactive physics into modern web-based user interfaces.
8Impact on Web Animation
The Jelly Sheet project underscores the evolving potential of the web as a medium for high-fidelity interactive experiences. By leveraging browser capabilities, such experiments push the limits of what is possible without specialized plugins. It remains a reference point for developers aiming to implement fluid, responsive, and physically accurate animations in projects.
Original article: Hacker News: Front Page — Jelly Sheet: Interactive Web Physics Simulation