Treize Grammes has just completed a full rebrand, transforming both their agency and website. The decision came after recognizing a gap between their brand identity and the agency’s growth. Their previous communication style no longer reflected who they had become, which led to missed opportunities. Shifting Client Expectations The needs of their clients have evolved. […]
Case Study: Treize Grammes — 2024 Read More »
In this tutorial, you will learn how to create a pixel/grid displacement effect using Three.js, enhanced with shaders and GPGPU techniques. The guide covers the application of a subtle RGB shift effect that dynamically responds to cursor movement. By the end, you’ll gain a solid understanding of manipulating textures and creating interactive visual effects in
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders Read More »
Some fun Terminal-like character hover animations for lines of text. If you haven’t seen Jean Dawson’s incredible website yet, I recommend you to check it out! It was made by Mouthwash and Guillaume Colombel and it looks like a 1985 VHS tape was brought to life! As an 80s kid, I have a soft spot
Hover Animations for Terminal-like Typography Read More »
A little hover motion effect on a grid and an intro animation. I have a real appreciation for websites that incorporate playful interactive visuals; they add a distinctive character to a brand and create an engaging experience for visitors. Recently, I came across sink.design, where they aptly refer to these visuals as “Play.” Just click
Hover Motion Intro Animation Read More »
A set of diverse image effects that reveal some more information on hover. Today, we’re back with some nice design finds: hover effects on images. These effects enhance images by revealing additional details upon hover. Highlighting the diversity within, we collected various approaches, some without animation. Explore this versatile set—I hope you find it both
Design Finds: Detail Hovers on Images Read More »
A recreation of the grid item reveal animation on hover as seen on the website of Metalab. Recently, the new design of the Metalab website went live. It is full of interesting animations and unique details, go have a look! I love the animation of the project previews on hover and so I took a
Grid Item Reveal Animation on Hover Read More »
Three hover effects based on a grid design by Alena Orlova. The other day I stumbled upon this really beautiful grid design by Alena Orlova: I love the details of the elements! As they call for being animated I went ahead and tinkered around with some hover effects which I want to share with you
Grid Item Hover Effect Read More »
I have a serious weakness for futuristic interfaces. And hover effects. Naturally, when I stumbled upon the website of Quai Network made by Unseen Studio, I totally fell in love with the whole design and interactive effects. Besides the amazing graphics and interactivity, I found their hover animation to be a really nice one to
Coding the Sliced Image Hover Effect from Quai Network Read More »
A while ago I thought it would be a great idea to send out exclusive demos specifically for our newsletter subscribers, hoping to attract more readers. Codrops operates on sponsorships, particularly from sponsored articles and the Collective, so acquiring more subscribers equates to maintaining our momentum, generating demos, and curating the Collective weekly. But we
4 Exclusive Demos: Slideshows & Typographic Animations Read More »
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way. From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today. Today I’d like to share a demo with you that explores how to utilize CSS clip-path to create interesting-looking
Double Image Hover Effects with Clip-Path Animations Read More »
