Looping marquee built with GSAP Timeline using custom directions and reverse playing.
A Pen by Patrick F. Mayer 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
| <!-- 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> |
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> | |
| <textarea id="codeEditor" class="editor" spellcheck="false" autocorrect="off" autocapitalize="off" translate="no" oninput="render()"></textarea> | |
| <pre id="error"></pre> | |
| <div id="indicator"></div> | |
| <div id="controls"> | |
| <div class="controls"> | |
| <input id="btnToggleView" class="icon" type="checkbox" name="toggleView" onclick="toggleView()"> | |
| <input id="btnToggleResolution" class="icon" type="checkbox" name="toggleResolution" onchange="toggleResolution()"> | |
| <input id="btnReset" class="icon" type="checkbox" name="reset" onclick="reset()"> | |
| </div> |
kazzohikaru
/ gsap-looping-marquee-timeline-and-reverse.markdown
Created
March 27, 2026 18:47
GSAP Looping Marquee Timeline and Reverse
kazzohikaru
/ index.pug
Created
March 24, 2026 06:59
Pure CSS 3D animated carousel - minimal code, heavily commented
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
| - const DATA = [ | |
| - '1540968221243-29f5d70540bf', | |
| - '1596135187959-562c650d98bc', | |
| - '1628944682084-831f35256163', | |
| - '1590013330451-3946e83e0392', | |
| - '1590421959604-741d0eec0a2e', | |
| - '1572613000712-eadc57acbecd', | |
| - '1570097192570-4b49a6736f9f', | |
| - '1620789550663-2b10e0080354', | |
| - '1617775623669-20bff4ffaa5c', |
kazzohikaru
/ index.html
Created
February 22, 2026 00:05
Stream Images with Wind – JavaScript 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
| <canvas id="scene"></canvas> | |
| <button id="show-btn" style="display:none;">⚙️</button> | |
| <div id="controls"> | |
| <div class="panel-header"> | |
| <h3>Settings</h3> | |
| <button id="hide-btn">Hide</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 class="integer"> | |
| 1 | |
| </div> |
A Pen by Holland Blumer on CodePen.
kazzohikaru
/ born-of-data-a-three-js-particle-lifeform.markdown
Created
February 13, 2026 02:02
Born of Data – A Three.js Particle Lifeform
Built with Three.js and glsl shaders, this interactive particle animation creates glowing formations that shift between a sphere, vortex, and nebula. Users can toggle trails, glow, and color from a cybernetic control panel.
A Pen by Techartist on CodePen.
A Pen by Chris Bolson on CodePen.
NewerOlder