move.gl 0.0.1 → 0.0.2

package/src/jinja/test_pulse.html.jinja

@@ -0,0 +1,78 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Pulse Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Pulse Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Pulse</h2>
+    <p>Scale-based pulsing effects for attention and emphasis.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_pulse"></div>
+            <p>pulse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_slow"></div>
+            <p>pulse-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_fast"></div>
+            <p>pulse-fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pulse_color"></div>
+            <p>pulse-color</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Heartbeat</h2>
+    <p>Organic heartbeat-like pulsing animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_heartbeat"></div>
+            <p>heartbeat</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_heartbeat_slow"></div>
+            <p>heartbeat-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_heartbeat_fast"></div>
+            <p>heartbeat-fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_heartbeat_color"></div>
+            <p>heartbeat-color</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_pulse;
+        }
+
+        .element-heartbeat {
+        @include animate_heartbeat;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_pulse"&gt;...&lt;/div&gt;
+        &lt;div class="animate_heartbeat"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_scale.html.jinja

@@ -0,0 +1,70 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Scale Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Scale Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Scale Effects</h2>
+    <p>Scale-based animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_scale_expand"></div>
+            <p>scale-expand</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_scale_shrink"></div>
+            <p>scale-shrink</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Zoom Effects</h2>
+    <p>Zoom-based entrance and exit animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_zoom"></div>
+            <p>zoom</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_zoom_slow"></div>
+            <p>zoom-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_zoom_fast"></div>
+            <p>zoom-fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_zoom_fade"></div>
+            <p>zoom-fade</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_scale_expand;
+        }
+
+        .element-zoom {
+        @include animate_zoom;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_scale_expand"&gt;...&lt;/div&gt;
+        &lt;div class="animate_zoom"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_shake.html.jinja

@@ -0,0 +1,98 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Shake Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Shake Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Shake</h2>
+    <p>Rotation-based shake animations for attention and alerts.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_shake"></div>
+            <p>shake</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_shake_slow"></div>
+            <p>shake-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_shake_horizontal"></div>
+            <p>shake-horizontal</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Wobble & Jiggle</h2>
+    <p>Playful wobbling and jiggling effects.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_wobble"></div>
+            <p>wobble</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_wobble_slow"></div>
+            <p>wobble-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_wobble_fast"></div>
+            <p>wobble-fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_wobble_scale"></div>
+            <p>wobble-scale</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Jiggle Effects</h2>
+    <p>Quick jiggling motion effects.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle"></div>
+            <p>jiggle</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle_slow"></div>
+            <p>jiggle-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle_multi"></div>
+            <p>jiggle-multi</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_jiggle_vertical"></div>
+            <p>jiggle-vertical</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_shake;
+        }
+
+        .element-wobble {
+        @include animate_wobble;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_shake"&gt;...&lt;/div&gt;
+        &lt;div class="animate_wobble"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_slide.html.jinja

@@ -0,0 +1,78 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Slide Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Slide Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Slide In</h2>
+    <p>Directional sliding entrance animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_up"></div>
+            <p>slide-in-up</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_down"></div>
+            <p>slide-in-down</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_left"></div>
+            <p>slide-in-left</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_in_right"></div>
+            <p>slide-in-right</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Slide Out</h2>
+    <p>Directional sliding exit animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_slide_out_up"></div>
+            <p>slide-out-up</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_out_down"></div>
+            <p>slide-out-down</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_out_left"></div>
+            <p>slide-out-left</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_slide_out_right"></div>
+            <p>slide-out-right</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_slide_in_up;
+        }
+
+        .element-out {
+        @include animate_slide_out_down;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_slide_in_up"&gt;...&lt;/div&gt;
+        &lt;div class="animate_slide_out_down"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_special.html.jinja

@@ -0,0 +1,123 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Special Effects — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Special Effects</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Float Effects</h2>
+    <p>Subtle floating animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_float"></div>
+            <p>float</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_float_horizontal"></div>
+            <p>float-horizontal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_float_rotate"></div>
+            <p>float-rotate</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Glow Effects</h2>
+    <p>Glowing box-shadow animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_glow"></div>
+            <p>glow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_glow_soft"></div>
+            <p>glow-soft</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_glow_pulse"></div>
+            <p>glow-pulse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_glow_multicolor"></div>
+            <p>glow-multicolor</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Ripple Effects</h2>
+    <p>Ripple and wave animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_ripple"></div>
+            <p>ripple</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_ripple_slow"></div>
+            <p>ripple-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_ripple_multi"></div>
+            <p>ripple-multi</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_ripple_color"></div>
+            <p>ripple-color</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Wave & Twist</h2>
+    <p>Complex transformation animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_wave"></div>
+            <p>wave</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_wave_slow"></div>
+            <p>wave-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_twist"></div>
+            <p>twist</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_twist_fast"></div>
+            <p>twist-fast</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_float;
+        }
+
+        .element-glow {
+        @include animate_glow;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_float"&gt;...&lt;/div&gt;
+        &lt;div class="animate_glow"&gt;...&lt;/div&gt;
+        &lt;div class="animate_ripple"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_spin.html.jinja

@@ -0,0 +1,82 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Spin & Rotate Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Spin & Rotate Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Spin</h2>
+    <p>Continuous rotation animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_spin"></div>
+            <p>spin</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_reverse"></div>
+            <p>spin-reverse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_pulse"></div>
+            <p>spin-pulse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_grow"></div>
+            <p>spin-grow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_spin_flip"></div>
+            <p>spin-flip</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Roll</h2>
+    <p>Rolling entrance and exit effects.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_roll"></div>
+            <p>roll</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_roll_slow"></div>
+            <p>roll-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_roll_reverse"></div>
+            <p>roll-reverse</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_roll_vertical"></div>
+            <p>roll-vertical</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_spin;
+        }
+
+        .element-roll {
+        @include animate_roll;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_spin"&gt;...&lt;/div&gt;
+        &lt;div class="animate_roll"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}