The Web playground
53 experiments, seven categories, one live demo at a time. Search by name or API, choose a demo, interact with it, and copy its core code. The selected experiment stays in the URL and survives language switching.
Explore
- Motion & physics · 12: Springs, stagger, keyframes, presets, gravity, decay, timelines, sequences, seeking, states, values and circle physics.
- Touch & gestures · 7: Press, drag/snap, inertia, simultaneous gestures, pointer following, image zoom and reorder.
- Scroll & layout · 9: Vertical and horizontal/RTL scroll, viewport entrances, keyed items, layout, automatic size, shared layout, collapsing headers and nested scrolling.
- Visual effects · 12: Linear/radial/conic gradients, particles, confetti, blur, glass, shapes, SVG drawing, liquid images, image effects, reveal/conceal, shimmer and loaders.
- Type & symbols · 3: Word/letter animation, rolling numbers and layered symbol effects.
- Surfaces & navigation · 5: Bottom sheets, interactive dialogs, shared navigation, interactive back and gallery return, including a removed thumbnail.
- Device & browser · 5: Rotation and gravity sensors, haptics, keyboard observation/following and playback/lifecycle inspection.
What actually runs
All previews use the existing experimental Jolt Web runtime. Only the selected experiment is mounted. Leaving the viewport suspends its scope; returning recreates it. Switching demos or leaving the page disposes listeners, effects and DOM ownership. Resizing rebuilds geometry-dependent bounds. The site and operating system reduced-motion preferences remain respected.
Code snippets show the core integration and assume mounted DOM refs. The linked API guide supplies markup requirements, lifecycle details and limitations. Shared navigation changes a local demo scene; the application still owns its routes. The Vue adapter is documented in Web integration. No engine capability or native API changed in this site update.
Sensors request permission only after an explicit action and require real readings before reporting active. Unsupported or denied devices stay clearly labeled. Haptic requests report browser acceptance, not proof of vibration. A desktop keyboard normally reports zero covered pixels; try the keyboard demo on a compatible phone. Glass and image effects expose their real rendering backend. Reduced motion may suppress playback.
Real browser walkthroughs
Reviewed native references
These existing native recordings remain separate from the browser previews. The linked API guides include the additional native counterparts and their platform-specific limits.
Review and coverage
Run npm run docs:check-playground, npm run docs:check-media and npm run docs:build. With the site running, use JOLT_SITE_URL=http://127.0.0.1:5184 npm run docs:test-playground. The review exercises every experiment in Chromium and WebKit, followed by gesture, keyboard, responsive, locale, reduced-motion and cleanup checks. The API coverage check fails when a public Web runtime method has no demo or documented host responsibility. It tracks coverage, not universal browser support.