🐧 reference website: https://www.usebutter.com/
A Pen by Vivi Tseng on CodePen.
kazzohikaru
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="slideshow"> | |
| <div class="grid"> | |
| <!-- 14 blokken voor een grotere mozaïek --> | |
| <div class="tile"></div> | |
| <div class="tile"></div> | |
| <div class="tile"></div> | |
| <div class="tile"></div> | |
| <div class="tile"></div> | |
| <div class="tile"></div> | |
| <div class="tile"></div> |
kazzohikaru
/ 3d-image-carousel-animation.markdown
Created
March 27, 2026 22:16
3d image carousel animation
kazzohikaru
/ carousel-with-drag-and-wheel.markdown
Created
March 27, 2026 21:27
Carousel with drag and wheel
Experience the elegance of simplicity with this fully custom-made carousel of images. No frameworks, no fuss – just pure and fast performance, powered by CSS variables. With intuitive drag and drop capabilities and seamless mouse wheel navigation, you'll be sure to appreciate the beauty of this unique carousel design. Please don't use for a personal project or for commercial use.
A Pen by Fabio Ottaviani on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Sonification Image Processor | |
| Attempt to transform images into sound by mapping pixel colors to musical notes and applying various audio effects. | |
| - Reads the image from left to right, top to bottom. | |
| - Each pixel's hue determines the note, mapped to a selected musical scale. | |
| - The brightness (lightness) of the color controls octave shifts and sound characteristics. | |
| - Implements vibrato, tremolo, and harmonic layering for richer tonal expression. | |
| - Uses dynamic volume scaling to ensure all pixels contribute to the sound. |
kazzohikaru
/ glitchify-image-v4-update-17-04-25.markdown
Created
March 27, 2026 21:04
Glitchify Image v4 [Update 17/04/25]
A Pen by Luis Alberto Martinez Riancho on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Horizontal, responsive carousel (Swiper-based) enhanced with GSAP ScrollTrigger for | |
| scroll-synchronized animations. It supports both scrubbed (scroll-controlled) and free-swiping modes. | |
| --> | |
| <div class="viewport-wrapper"> | |
| <div class="content-scroll"> | |
| <main class="main-content"> | |
| <div class="dummy-block"> | |
| <div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="webgl_canvas"></canvas> | |
| <div id="hud"> | |
| <div id="hud_pct">000%</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="prog_fill"></div> | |
| </div> | |
| <div class="scene-label" id="scene_name">DAWN</div> | |
| </div> | |
| <button id="theme_toggle" aria-label="Toggle light/dark mode"> | |
| <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="webgl-canvas"></canvas> | |
| <div id="hud"> | |
| <div id="hud-pct">000%</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="prog-fill"></div> | |
| </div> | |
| <div class="scene-label" id="scene-name">DAWN</div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Inspired by Baku89's VJ work --> | |
| <!-- https://twitter.com/_baku89/status/1736420979583451474 --> | |
| <h1 id="char">?</h1> | |
| <div id="cursor"></div> | |
| <span id="info">\u0000</div> |
NewerOlder