コンポーネント一覧
pinion-ui

Theme

Tune

Lang

Backdrop

テーマの色だけで描くページ背景。x-backdrop を body 直後に 1 つ置く。flow（2 つの光がゆっくり漂うアニメーション）・glow・grid・dot などのパターンと、-s / -m / -l の密度。local でヒーローやカードの中だけに敷ける。v0.20.0 で追加。

ページ全体に敷く（body 直後に 1 つ）

<body>
    <x-backdrop pattern="flow" />
    ...
</body>

<div class="pn-backdrop" data-pattern="flow" data-size="m" aria-hidden="true">
<i></i><i></i>
</div>...

flow — テーマ色の 2 つの光が漂う（local でセクション内だけ）

Ship faster

Two theme-colored glows drift behind the hero.

<section class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 w-full h-56 grid place-items-center">
    <x-backdrop pattern="flow" local />
    <div class="text-center">
        <h3 class="text-2xl font-bold">Ship faster</h3>
        <p class="text-sm text-base-content/70">Two theme-colored glows drift behind the hero.</p>
    </div>
</section>

<section class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 w-full h-56 grid place-items-center">
<div class="pn-backdrop" data-pattern="flow" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold">
            Ship faster
        </h3>
<p class="text-sm text-base-content/70">
            Two theme-colored glows drift behind the hero.
        </p>
</div>
</section>

パターン一覧 — すべてテーマのトークンだけで描画

glow
grid
dot
ndot
ring
cross
rule
diag
paper
chev
sig 
@foreach (['glow', 'grid', 'dot', 'ndot', 'ring', 'cross', 'rule', 'diag', 'paper', 'chev', 'sig'] as $p)
    <div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
        <x-backdrop :pattern="$p" local />
        <code class="text-xs bg-base-100 px-2 py-0.5 rounded">{{ $p }}</code>
    </div>
@endforeach

<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="glow" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">glow</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="grid" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">grid</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="dot" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">dot</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="ndot" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">ndot</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="ring" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">ring</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="cross" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">cross</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="rule" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">rule</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="diag" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">diag</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="paper" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">paper</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="chev" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">chev</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="sig" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">sig</code>
</div>

密度 — -s / -m / -l

grid-s
grid-m
grid-l
sig-s
sig-m
sig-l 
@foreach (['grid-s', 'grid-m', 'grid-l', 'sig-s', 'sig-m', 'sig-l'] as $p)
    <div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
        <x-backdrop :pattern="$p" local />
        <code class="text-xs bg-base-100 px-2 py-0.5 rounded">{{ $p }}</code>
    </div>
@endforeach

<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="grid" data-size="s" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">grid-s</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="grid" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">grid-m</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="grid" data-size="l" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">grid-l</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="sig" data-size="s" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">sig-s</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="sig" data-size="m" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">sig-m</code>
</div>
<div class="relative isolate overflow-hidden rounded-[var(--radius-box)] border border-base-300 h-28 grid place-items-center">
<div class="pn-backdrop" data-pattern="sig" data-size="l" data-local="" aria-hidden="true">
<i></i><i></i>
</div><code class="text-xs bg-base-100 px-2 py-0.5 rounded">sig-l</code>
</div>