元件
pinion-ui

Theme

Tune

Lang

Backdrop

僅用主題色繪製的頁面背景。在 body 之後放一個 x-backdrop。圖案有 flow（兩團光緩慢漂移的動畫）、glow、grid、dot 等，並可加 -s / -m / -l 密度。local 可只鋪在 hero 或卡片內。v0.20.0 新增。

鋪滿整頁（在 body 之後放一個）

<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——兩團主題色的光漂移（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>