Interactive 3D with Three.js BatchedMesh and WebGPURenderer
A breakdown of a Three.js demo using BatchedMesh for efficient mesh rendering and exploring the new post-processing pipeline with TSL.
Playground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Staggered (3D) Grid Animations with Scroll-Triggered Effects
by Manoela Ilic
A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
Exploring Playful Context-Aware Animations for Fixed Elements
by Manoela Ilic
Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.
Exploration of On-Scroll Layout Formations
by Manoela Ilic
An exploration of layout formations during scroll, where content is pinned until the layout is fully assembled.
Scroll-based SVG Filter Animations on Text
by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
Origami: 12 Free Animated 3D Objects
by deadrabbbbit
A set of twelve free 3D animations created with React Three Fiber and GSAP.
Hover Animations for Terminal-like Typography
by Manoela Ilic
Some fun Terminal-like character hover animations for lines of text.
Push Animation on Grid Items
by Manoela Ilic
A grid animation based on Rémi Clauss’ concept where grid items move to a specific position relative to their initial one.
Hover Motion Intro Animation
by Manoela Ilic
A little hover motion effect on a grid and an intro animation.
Model Texture Transition and Procedural Radial Noise using WebGL
A WebGL experiment that explores two visual effects: a texture transition on a 3D can model and a procedural radial noise field.
Blurry Text Reveal on Scroll
by Manoela Ilic
A blurry text reveal animation on scroll inspired by Rauno’s “Blur reveal”.
Some On-Scroll Text Highlight Animations
by Manoela Ilic
Some ideas for scroll-based text highlight animations.
Image Stack Entrance Animations
by deadrabbbbit
A circular stack intro for images with different animations.
On-Scroll Expanding Image Animation within Typography
by Manoela Ilic
An animation experiment where we expand an image within some typographic element on scroll.
Grid Item Reveal Animation on Hover
by Manoela Ilic
A recreation of the grid item reveal animation on hover as seen on the website of Metalab.
Reflection Scroll Effect
by Manoela Ilic
A decorative reflection effect where we simulate a reflected page and scroll it along with the content.
On-Scroll Revealing WebGL Images
by Yuri Artiukh
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
