move.gl 0.0.1 → 0.0.2

package/src/jinja/test_transforms.html.jinja

@@ -0,0 +1,198 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Transforms — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Effects</p>
+<h1>Transforms</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Flip Transforms</h2>
+    <p>Flip elements horizontally, vertically, or both.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box">Normal</div>
+            <p>normal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_flip_horizontal">Flip H</div>
+            <p>transform_flip_horizontal</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_flip_vertical">Flip V</div>
+            <p>transform_flip_vertical</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_flip_both">Both</div>
+            <p>transform_flip_both</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Rotation Transforms</h2>
+    <p>Rotate elements by fixed angles.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box transform_rotate_90">90°</div>
+            <p>transform_rotate_90</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_rotate_180">180°</div>
+            <p>transform_rotate_180</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_rotate_270">270°</div>
+            <p>transform_rotate_270</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform_rotate_dynamic" style="--rotate-angle: 45deg;">45°</div>
+            <p>transform_rotate_dynamic</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Scale Transforms</h2>
+    <p>Scale elements up or down.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box scale_up"></div>
+            <p>scale_up (1.2x)</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box scale_down"></div>
+            <p>scale_down (0.8x)</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Translate & Skew Transforms</h2>
+    <p>Move and skew elements.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box translate_xy"></div>
+            <p>translate_xy</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box skew_xy"></div>
+            <p>skew_xy</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Interactive Transforms (Hover)</h2>
+    <p>Hover over the elements to see transform effects.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box transform-translate-x"></div>
+            <p>translateX</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-translate-y"></div>
+            <p>translateY</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-scale"></div>
+            <p>scale</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-rotate"></div>
+            <p>rotate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-skew-x"></div>
+            <p>skewX</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-skew-y"></div>
+            <p>skewY</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>3D Transforms (Hover)</h2>
+    <p>Perspective-based 3D transforms.</p>
+
+    <div class="demo-row">
+        <div class="demo-item perspective-container">
+            <div class="demo-box transform-rotate-x"></div>
+            <p>rotateX</p>
+        </div>
+        <div class="demo-item perspective-container">
+            <div class="demo-box transform-rotate-y"></div>
+            <p>rotateY</p>
+        </div>
+        <div class="demo-item perspective-container">
+            <div class="demo-box transform-rotate-z"></div>
+            <p>rotateZ</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Combined Transforms (Hover)</h2>
+    <p>Multiple transforms combined.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box transform-combined-1"></div>
+            <p>scale + rotate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transform-combined-2"></div>
+            <p>translate + scale</p>
+        </div>
+        <div class="demo-item perspective-container">
+            <div class="demo-box transform-combined-3"></div>
+            <p>3D rotate + scale</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// Utility Classes (immediate transform)</span>
+        &lt;div class="transform_flip_horizontal"&gt;...&lt;/div&gt;
+        &lt;div class="transform_rotate_90"&gt;...&lt;/div&gt;
+        &lt;div class="scale_up"&gt;...&lt;/div&gt;
+        &lt;div class="translate_xy"&gt;...&lt;/div&gt;
+
+        <span class="comment">// Dynamic rotation with CSS variable</span>
+        &lt;div class="transform_rotate_dynamic" style="--rotate-angle: 45deg;"&gt;...&lt;/div&gt;
+
+        <span class="comment">// SCSS Mixins</span>
+        .element {
+        @include transform_flip_horizontal;
+        }
+
+        .rotated {
+        @include transform_rotate(45deg);
+        }
+
+        .scaled {
+        @include scale(1.5);
+        }
+
+        <span class="comment">// Combined transforms</span>
+        .card {
+        @include transform(
+        translateY(-10px) scale(1.05) rotate(2deg)
+        );
+        }
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/test_transitions.html.jinja

@@ -0,0 +1,111 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Transitions — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Effects</p>
+<h1>Transitions</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Hover Transitions</h2>
+    <p>Hover over the elements to see smooth transitions.</p>
+
+    <div class="demo-row">
+        <div class="demo-item">
+            <div class="demo-box transition-opacity"></div>
+            <p>opacity</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transition-scale"></div>
+            <p>scale</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transition-translate"></div>
+            <p>translate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transition-rotate"></div>
+            <p>rotate</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transition-color"></div>
+            <p>color</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box transition-shadow"></div>
+            <p>shadow</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Timing Functions</h2>
+    <p>Different easing functions for transitions.</p>
+
+    <div class="demo-row demo-row--timing">
+        <div class="demo-item">
+            <div class="demo-box timing-linear"></div>
+            <p>linear</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box timing-ease"></div>
+            <p>ease</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box timing-ease-in"></div>
+            <p>ease-in</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box timing-ease-out"></div>
+            <p>ease-out</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box timing-ease-in-out"></div>
+            <p>ease-in-out</p>
+        </div>
+        <div class="demo-item">
+            <div class="demo-box timing-bounce"></div>
+            <p>bounce</p>
+        </div>
+    </div>
+
+    <button class="btn btn--primary" onclick="runTimingDemo()">Run Demo</button>
+</section>
+
+<section>
+    <h2>Usage</h2>
+
+    <div class="code-block"><span class="comment">// SCSS Mixin</span>
+        .element {
+        @include transition(opacity, 0.3s, ease-out);
+        }
+
+        <span class="comment">// Multiple properties</span>
+        .card {
+        @include transition-multiple(
+        (transform, 0.3s, ease-out),
+        (opacity, 0.2s, ease-in),
+        (box-shadow, 0.3s, ease)
+        );
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="transition-all"&gt;...&lt;/div&gt;
+        &lt;div class="transition-opacity"&gt;...&lt;/div&gt;
+        &lt;div class="transition-transform"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+<script>
+    function runTimingDemo() {
+        const boxes = document.querySelectorAll('.demo-row--timing .demo-box');
+        boxes.forEach(box => {
+            box.classList.toggle('active');
+        });
+    }
+</script>
+
+{%- endblock %}

package/src/jinja/test_zoom.html.jinja

@@ -0,0 +1,54 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Zoom Animations — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Animations</p>
+<h1>Zoom Animations</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Zoom Effects</h2>
+    <p>Scale-based zoom 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_zoom;
+        }
+
+        .element-slow {
+        @include animate_zoom_slow;
+        }
+
+        <span class="comment">// Utility classes</span>
+        &lt;div class="animate_zoom"&gt;...&lt;/div&gt;
+        &lt;div class="animate_zoom_fast"&gt;...&lt;/div&gt;
+    </div>
+</section>
+
+{%- endblock %}