move.gl 0.0.1 → 0.0.2

package/src/jinja/test_fade.html.jinja

@@ -0,0 +1,79 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Fade Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Fade Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Fade Effects</h2>
+    <p>Smooth opacity transitions.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_fade"></div>
+            <p>fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_fade_in"></div>
+            <p>fade-in</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_fade_out"></div>
+            <p>fade-out</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_fade_gradual"></div>
+            <p>fade-gradual</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Slide + Fade Effects</h2>
+    <p>Combined slide and fade animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_slide_fade_in_up"></div>
+            <p>slide-fade-in-up</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_fade_in_down"></div>
+            <p>slide-fade-in-down</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_fade_in_left"></div>
+            <p>slide-fade-in-left</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_fade_in_right"></div>
+            <p>slide-fade-in-right</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_fade;
+        }
+
+        .element-in {
+        @include animate_fade_in;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_fade"&gt;...&lt;/div&gt;
+        &lt;div class="animate_fade_in"&gt;...&lt;/div&gt;
+        &lt;div class="animate_slide_fade_in_up"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_flip.html.jinja

@@ -0,0 +1,74 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Flip Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Flip Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Basic Flip Effects</h2>
+    <p>Perspective-based rotation animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_flip"></div>
+            <p>flip</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_horizontal"></div>
+            <p>flip-horizontal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_vertical"></div>
+            <p>flip-vertical</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_diagonal"></div>
+            <p>flip-diagonal</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>180° Flip Effects</h2>
+    <p>Full 180-degree flip animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_flip_180_horizontal"></div>
+            <p>flip-180-horizontal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_180_vertical"></div>
+            <p>flip-180-vertical</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_180_diagonal"></div>
+            <p>flip-180-diagonal</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .card {
+        @include animate_flip;
+        }
+
+        .card-horizontal {
+        @include animate_flip_horizontal;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_flip"&gt;...&lt;/div&gt;
+        &lt;div class="animate_flip_horizontal"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_keyframes.html.jinja

@@ -0,0 +1,281 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Keyframes — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Keyframe Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>About Keyframes</h2>
+    <p>Keyframes are the building blocks of CSS animations. In move.gl, keyframes are used internally by the
+        <code>animate_*</code> utility classes. This page demonstrates how different keyframe animations look when
+        applied via the animation classes.</p>
+</section>
+
+<section>
+    <h2>Beat Animations</h2>
+    <p>Pulsing heartbeat-style animations using scale keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_beat">♥</div>
+            <p>animate_beat</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_beat_fade">♥</div>
+            <p>animate_beat_fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_beat_double">♥</div>
+            <p>animate_beat_double</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Flash Animations</h2>
+    <p>Attention-grabbing flash effects using opacity keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_flash"></div>
+            <p>animate_flash</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flash_fade"></div>
+            <p>animate_flash_fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flash_strobe"></div>
+            <p>animate_flash_strobe</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flash_fade_slow"></div>
+            <p>animate_flash_fade_slow</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Pulse Animations</h2>
+    <p>Rhythmic pulsing effects using scale keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_pulse"></div>
+            <p>animate_pulse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_slow"></div>
+            <p>animate_pulse_slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_fast"></div>
+            <p>animate_pulse_fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_color"></div>
+            <p>animate_pulse_color</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Scale Animations</h2>
+    <p>Size-changing animations using transform scale keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_scale_expand"></div>
+            <p>animate_scale_expand</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_scale_shrink"></div>
+            <p>animate_scale_shrink</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_zoom"></div>
+            <p>animate_zoom</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_zoom_fade"></div>
+            <p>animate_zoom_fade</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Rotation Animations</h2>
+    <p>Spinning and rotating animations using transform rotate keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_spin">↻</div>
+            <p>animate_spin</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_reverse">↺</div>
+            <p>animate_spin_reverse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_pulse">↻</div>
+            <p>animate_spin_pulse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_wobble">~</div>
+            <p>animate_wobble</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Translate Animations</h2>
+    <p>Movement-based animations using transform translate keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_right">→</div>
+            <p>animate_slide_in_right</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_down">↓</div>
+            <p>animate_slide_in_down</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_float">☁</div>
+            <p>animate_float</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_bounce">⬆</div>
+            <p>animate_bounce</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Fade Animations</h2>
+    <p>Opacity-based animations using fade keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_fade"></div>
+            <p>animate_fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_fade_in"></div>
+            <p>animate_fade_in</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_blink"></div>
+            <p>animate_blink</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_blink_soft"></div>
+            <p>animate_blink_soft</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Skew & Jiggle Animations</h2>
+    <p>Skewing and shearing animations using transform skew keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle"></div>
+            <p>animate_jiggle</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle_vertical"></div>
+            <p>animate_jiggle_vertical</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_shake"></div>
+            <p>animate_shake</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_shake_horizontal"></div>
+            <p>animate_shake_horizontal</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>3D Animations</h2>
+    <p>3D transform-based animations using perspective and rotate3d keyframes.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_flip"></div>
+            <p>animate_flip</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flip_horizontal"></div>
+            <p>animate_flip_horizontal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_swing"></div>
+            <p>animate_swing</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_tada"></div>
+            <p>animate_tada</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Combined Animations</h2>
+    <p>Complex animations combining multiple keyframe properties.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_bounce_rotate"></div>
+            <p>animate_bounce_rotate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pop"></div>
+            <p>animate_pop</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_elastic"></div>
+            <p>animate_elastic</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// Use the animate_* utility classes directly</span>
+        &lt;div class="animate_beat"&gt;♥&lt;/div&gt;
+        &lt;div class="animate_pulse"&gt;...&lt;/div&gt;
+        &lt;div class="animate_spin"&gt;...&lt;/div&gt;
+
+        <span class="comment">// Or use the SCSS mixins</span>
+        .my-element {
+        @include animate_beat;
+        }
+
+        .pulsing-button {
+        @include animate_pulse_slow;
+        }
+
+        <span class="comment">// Custom keyframes using the mixin</span>
+        @include keyframes('my-custom-animation') {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-30px); }
+        100% { transform: translateY(0); }
+        }
+
+        .bouncing-element {
+        animation: my-custom-animation 0.6s ease infinite;
+        }
+    </div>
+</section>
+
+{%- endblock %}