Case Study: Treize Grammes — 2024
In Articles, by Thomas Carré
Learn about the challenges and creative solutions that shaped Treize Grammes’ bold rebrand and interactive design.
hover
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders
In Tutorials, by Jean Mazouni
Learn how to apply a pixel/grid displacement to a texture in Three.js using shaders and GPGPU with a subtle RGB shift effect on cursor move.
Hover Animations for Terminal-like Typography
In Playground, by Manoela Ilic
Some fun Terminal-like character hover animations for lines of text.
Hover Motion Intro Animation
In Playground, by Manoela Ilic
A little hover motion effect on a grid and an intro animation.
Design Finds: Detail Hovers on Images
In Articles, by Manoela Ilic
A set of diverse image effects that reveal some more information on hover.
Grid Item Reveal Animation on Hover
In Playground, by Manoela Ilic
A recreation of the grid item reveal animation on hover as seen on the website of Metalab.
Grid Item Hover Effect
In Playground, by Manoela Ilic
Three hover effects based on a grid design by Alena Orlova.
Coding the Sliced Image Hover Effect from Quai Network
In Tutorials, by Manoela Ilic
Learn how to code a similar hover animation to the one seen on the website of Quai Network.
4 Exclusive Demos: Slideshows & Typographic Animations
In Playground, by Manoela Ilic
Four distinct demos, from image slideshows to on-scroll typography and hover effects.
Recreating the Gradient Mask Hover Effect from Evervault
In Tutorials, by Manoela Ilic
A recreation of the hover effect seen on the customer grid on the Evervault website.
Double Image Hover Effects with Clip-Path Animations
In Playground, by Manoela Ilic
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
3D Perspective Glitch Hover Effect
In Playground, by Manoela Ilic
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy’s website.
Lines to Content Layout Animation
In Playground, by Manoela Ilic
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
Hover Preview Effect with Mini Map
In Playground, by Manoela Ilic
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Repetition Image Hover Effects
In Playground, by Manoela Ilic
A simple and fun hover effect with repeated image layers that get scaled up and down.
Menu and Thumbnail Stack Animation
In Playground, by Manoela Ilic
An animation on an image stack for a menu where the images get rearranged from a column into a row.
Superhero Animation Effect with SVG Filters
In Tutorials, by Abner Nascimento
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
How to Code the K72 Marquee Hover Animation
In Tutorials, by Manoela Ilic
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
