Skip to content

Instantly share code, notes, and snippets.

View SakuraRinDev's full-sized avatar

Sakura Rin SakuraRinDev

View GitHub Profile
@SakuraRinDev
SakuraRinDev / index.html
Created February 23, 2026 01:28
[javascript] ❍ Circular Animations Set N°1
<h1>CIRCLE ANIMATIONS COLLECTION</h1>
<div class="container">
<!-- 1 -->
<div class="animation-container">
<div class="animation-title">Pulsating Circles</div>
<div id="anim1" class="circle-container"></div>
</div>
<!-- 2 -->
<div class="animation-container">
<div class="animation-title">Rotating Orbits</div>
@SakuraRinDev
SakuraRinDev / index.html
Created January 6, 2026 05:52
Rolling text
<div class="container">
<div class="tube">
<h1 class="line line1">SplitText</h1>
<h1 class="line line2">SplitText</h1>
<h1 class="line line3">SplitText</h1>
<h1 class="line line3">SplitText</h1>
</div>
</div>
@SakuraRinDev
SakuraRinDev / gsap-draggable-image-gallery.markdown
Created January 6, 2026 03:55
[gsap] ❍ Draggable Image Gallery
@SakuraRinDev
SakuraRinDev / editorial-layout-the-architecture-of-silence.markdown
Created January 6, 2026 03:45
Editorial Layout: The Architecture of Silence
@SakuraRinDev
SakuraRinDev / index.html
Created January 6, 2026 03:40
[threejs/gsap] ❍ Liquid Morphology Slideshow
<main class="slider-wrapper">
<canvas class="webgl-canvas"></canvas>
<span class="slide-number" id="slideNumber">01</span>
<span class="slide-total" id="slideTotal">06</span>
<span class="help-text">
H: Toggle Settings • Space/→: Next • ←: Previous • Click to Advance
</span>
<nav class="slides-navigation" id="slidesNav">
<!-- Navigation items will be generated by JavaScript -->
</nav>
@SakuraRinDev
SakuraRinDev / index.html
Created January 6, 2026 02:24
[threejs/gsap] ❍ Liquid Morphology Slideshow
<main class="slider-wrapper">
<canvas class="webgl-canvas"></canvas>
<span class="slide-number" id="slideNumber">01</span>
<span class="slide-total" id="slideTotal">06</span>
<span class="help-text">
H: Toggle Settings • Space/→: Next • ←: Previous • Click to Advance
</span>
<nav class="slides-navigation" id="slidesNav">
<!-- Navigation items will be generated by JavaScript -->
</nav>