{% 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 %}