A Pen by Filip Zrnzevic 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
| <body id="root" class="antialiased bg-[#1b1b1b] text-white text-sm"></body> |
Bonatti123
/ index.html
Created
October 13, 2025 20:07
[threejs/gsap] ❍ Interactive Glass Lens Effect with Sound FX
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="error-message" id="errorMessage"></div> | |
| <div class="fallback-bg" id="fallbackBg"></div> | |
| <div class="audio-enable"> | |
| <p>ENTER EXPERIENCE<br />WITH AUDIO</p> | |
| <button class="enable-button" id="enableBtn">START</button> | |
| </div> | |
| <div class="preloader" id="preloader"> | |
| <span id="counter">[000]</span> |
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
| <black-hole> | |
| <canvas class="js-canvas"></canvas> | |
| </black-hole><!-- .black-hole --> |
Bonatti123
/ gsap-infinite-draggable-image-gallery.markdown
Created
October 13, 2025 20:06
[gsap] ❍ Infinite Draggable Image Gallery
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="canvas"></canvas> |
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="header"> | |
| <h1>Color Galaxy Explorer</h1> | |
| <p>Explore the relationships between colors in a cosmic way</p> | |
| <div class="controls"> | |
| <button id="modeToggle">Toggle Mode: Galaxy</button> | |
| <button id="speedUp">Speed Up</button> | |
| <button id="speedDown">Slow Down</button> | |
| <button id="toggleInfo">Toggle Info</button> | |
| <button id="reset">Reset View</button> | |
| </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
| <div role="img" aria-label="Cartoon of a bee in kawaii style"></div> | |
| <a id="youtube" href="https://www.youtube.com/watch?v=R5G1ZlDM4OI" target="_blank"> | |
| <span>Watch how this component was coded</span> | |
| </a> |
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 id="scene-container"></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="glCanvas"></canvas> | |
| <div class="container"> | |
| <h1>Animated Shader: Rainbow Zappers</h1> | |
| Lorem ipsum dolor sit amet, at labitur complectitur mei. Tota eloquentiam an sea, nostro electram mea et. Debitis accusata forensibus sed in, no omnium evertitur prodesset eam. Hendrerit torquatos deterruisset no per, eirmod equidem omnesque per ne. Vix appetere percipit cu. | |
| <p><button id="fullscreenBtn">⤢ Toggle Fullscreen</button> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> |
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="toolbar"> | |
| <div class="pill"> | |
| <span class="lbl">Glass</span> | |
| <input id="amp" type="range" min="0" max="1.5" value="0.5" step="0.01" /> | |
| <span id="ampVal" class="val">0.50</span> | |
| </div> | |
| <div class="pill"> | |
| <span class="lbl">Chromatic</span> | |
| <input id="chrom" type="range" min="0" max="2" value="0.6" step="0.01" /> | |
| <span id="chromVal" class="val">0.60</span> |
NewerOlder