move.gl 0.0.1 → 0.0.2

package/src/jinja/test_attention.html.jinja

@@ -0,0 +1,147 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Attention Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Attention Seekers</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Flash & Blink</h2>
+    <p>Visibility-based attention animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_flash"></div>
+            <p>flash</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flash_fade"></div>
+            <p>flash-fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_flash_strobe"></div>
+            <p>flash-strobe</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_blink"></div>
+            <p>blink</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_blink_rapid"></div>
+            <p>blink-rapid</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_blink_soft"></div>
+            <p>blink-soft</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Beat</h2>
+    <p>Beat and rhythm-based animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_beat"></div>
+            <p>beat</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_beat_fade"></div>
+            <p>beat-fade</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_beat_double"></div>
+            <p>beat-double</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Tada & Pop</h2>
+    <p>Celebratory entrance animations.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_tada"></div>
+            <p>tada</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_tada_slow"></div>
+            <p>tada-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_tada_fast"></div>
+            <p>tada-fast</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pop"></div>
+            <p>pop</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pop_slow"></div>
+            <p>pop-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_pop_fast"></div>
+            <p>pop-fast</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Swing & Sway</h2>
+    <p>Pendulum-like swinging motions.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_swing"></div>
+            <p>swing</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_swing_slow"></div>
+            <p>swing-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_sway"></div>
+            <p>sway</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_sway_slow"></div>
+            <p>sway-slow</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_nod"></div>
+            <p>nod</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_nod_slow"></div>
+            <p>nod-slow</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_tada;
+        }
+
+        .element-flash {
+        @include animate_flash;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_tada"&gt;...&lt;/div&gt;
+        &lt;div class="animate_flash"&gt;...&lt;/div&gt;
+        &lt;div class="animate_swing"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_bounce.html.jinja

@@ -0,0 +1,67 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Bounce Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Bounce Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Bounce Effects</h2>
+    <p>Playful bouncing animations with elastic easing.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_bounce"></div>
+            <p>bounce</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_bounce_extended"></div>
+            <p>bounce-extended</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_bounce_rotate"></div>
+            <p>bounce-rotate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box animate_bounce_multi"></div>
+            <p>bounce-multi</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Elastic Effects</h2>
+    <p>Elastic bounce effects with spring physics.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box animate_elastic"></div>
+            <p>elastic</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include animate_bounce;
+        }
+
+        .element-extended {
+        @include animate_bounce_extended;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_bounce"&gt;...&lt;/div&gt;
+        &lt;div class="animate_bounce_extended"&gt;...&lt;/div&gt;
+        &lt;div class="animate_bounce_rotate"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}