# Lost Fantasy

Fantasy RPG interface pieces from Lost Fantasy: panels, bars, item cases, particles and gradient names\.

- Pieces: 6
- Credit: [Lost Fantasy](https://lostfantasy.net)
- License: MIT

## Pieces

Each piece's page has its HTML, CSS and any variants or settings.

1. [RPG panel](https://thuvien.org/ui/elements/rpg-panel.md) (element): Beveled panel with an inset rim and corner pieces: brass by default, plus rarity\-tier variants\.
2. [Prismatic panel](https://thuvien.org/ui/elements/prismatic-panel.md) (element): Dark frame with a drifting prismatic edge, a light sweep and four\-colour corner pieces\.
3. [RPG progress bar](https://thuvien.org/ui/elements/rpg-progress-bar.md) (element): Bronze\-framed bar with a glossy fill, slow shimmer and centred readout; gold, health, mana and more\.
4. [Curio display case](https://thuvien.org/ui/elements/curio-case.md) (element): Showcase tile whose frame, finial and plinth light climb a six\-tier metal ladder\.
5. [Ambient particles](https://thuvien.org/ui/elements/ambient-particles.md) (element): A softly masked layer of drifting particles: rising motes, fireflies, falling petals, embers or rain\.
6. [Gradient text](https://thuvien.org/ui/tools/gradient-text.md) (tool): Gradient\-filled text with optional glow and motion\.

## Showcase

A scene that arranges the pieces together. It needs the pieces' CSS plus its own layout CSS.

```html
<div class="tv-lost-fantasy-scene">
  <div class="tv-ambient-particles tv-ambient-particles--fireflies">
    <div class="tv-ambient-particles-field" aria-hidden="true">
      <span class="tv-ambient-particles-bit" style="--x: 3.1%; --y: 24.3%; --size: 3px; --dur: 7.3s; --delay: -3.9s; --drift: 28px; --hue: 48; --rot: 259deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 8.0%; --y: 69.8%; --size: 5px; --dur: 7.3s; --delay: -0.7s; --drift: 11px; --hue: 300; --rot: 63deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 17.1%; --y: 56.9%; --size: 6px; --dur: 10.8s; --delay: -6.2s; --drift: 11px; --hue: 52; --rot: 23deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 23.7%; --y: 12.8%; --size: 4px; --dur: 8.5s; --delay: -4.7s; --drift: -28px; --hue: 48; --rot: 316deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 37.9%; --y: 81.5%; --size: 4px; --dur: 7.3s; --delay: -2.2s; --drift: 20px; --hue: 330; --rot: 229deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 45.0%; --y: 39.4%; --size: 6px; --dur: 9.3s; --delay: -8.1s; --drift: 20px; --hue: 160; --rot: 179deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 55.9%; --y: 63.7%; --size: 4px; --dur: 9.6s; --delay: -9.5s; --drift: 19px; --hue: 52; --rot: 197deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 65.5%; --y: 17.6%; --size: 5px; --dur: 8.4s; --delay: -5.1s; --drift: 11px; --hue: 48; --rot: 147deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 73.2%; --y: 83.3%; --size: 5px; --dur: 10.5s; --delay: -2.9s; --drift: 21px; --hue: 300; --rot: 194deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 84.0%; --y: 44.3%; --size: 5px; --dur: 9.1s; --delay: -5.5s; --drift: 14px; --hue: 52; --rot: 263deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 92.8%; --y: 18.5%; --size: 3px; --dur: 8.8s; --delay: -7.7s; --drift: 22px; --hue: 160; --rot: 201deg"></span>
      <span class="tv-ambient-particles-bit" style="--x: 96.0%; --y: 77.1%; --size: 3px; --dur: 7.8s; --delay: -7.7s; --drift: 15px; --hue: 48; --rot: 174deg"></span>
    </div>
  </div>
  <div class="tv-lost-fantasy-scene-title">
    <span class="tv-gradient-text" style="--tv-gradient-text-stops: #F59E0B 0%, #FDE68A 35%, #FFFBEB 50%, #FDE68A 65%, #F59E0B 100%; --tv-gradient-text-angle: 90deg; --tv-gradient-text-weight: 700; --tv-gradient-text-spread: 250%; --tv-gradient-text-glow-color: #FBBF24A6; --tv-gradient-text-glow-blur: 6px; --tv-gradient-text-motion: tv-gradient-text-slide 5s ease-in-out infinite;">Lost Fantasy</span>
  </div>
  <div class="tv-lost-fantasy-scene-grid">
    <div class="tv-lost-fantasy-scene-column">
      <div class="tv-rpg-panel tv-rpg-panel--legendary">
        <h3 class="tv-rpg-panel-title">Aria Moonvale</h3>
        <p class="tv-rpg-panel-subtitle">Level 42 · Arcanist</p>
      </div>
      <div class="tv-rpg-progress-bar tv-rpg-progress-bar--health" role="progressbar" aria-label="Health" aria-valuemin="0" aria-valuemax="100" aria-valuenow="86">
        <div class="tv-rpg-progress-bar-track">
          <div class="tv-rpg-progress-bar-fill" style="width: 86%"></div>
          <span class="tv-rpg-progress-bar-readout">HP 86 / 100</span>
        </div>
      </div>
      <div class="tv-rpg-progress-bar tv-rpg-progress-bar--mana" role="progressbar" aria-label="Mana" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54">
        <div class="tv-rpg-progress-bar-track">
          <div class="tv-rpg-progress-bar-fill" style="width: 54%"></div>
          <span class="tv-rpg-progress-bar-readout">MP 54 / 100</span>
        </div>
      </div>
      <div class="tv-rpg-progress-bar tv-rpg-progress-bar--experience" role="progressbar" aria-label="Experience" aria-valuemin="0" aria-valuemax="100" aria-valuenow="31">
        <div class="tv-rpg-progress-bar-track">
          <div class="tv-rpg-progress-bar-fill" style="width: 31%"></div>
          <span class="tv-rpg-progress-bar-readout">XP 31%</span>
        </div>
      </div>
    </div>
    <div class="tv-lost-fantasy-scene-curios">
      <figure class="tv-curio-case tv-curio-case--silvered">
        <span class="tv-curio-case-aura" aria-hidden="true"></span>
        <span class="tv-curio-case-frame" aria-hidden="true"></span>
        <span class="tv-curio-case-glass" aria-hidden="true"></span>
        <span class="tv-curio-case-count">×3</span>
        <svg class="tv-curio-case-exhibit" viewBox="0 0 64 64" aria-hidden="true">
          <path d="M20 14h24l10 12-22 28-22-28z" fill="#818cf8" />
          <path d="M10 26h44L32 54z" fill="#6366f1" />
          <path d="M26 26h12L32 54z" fill="#a5b4fc" />
          <path d="M20 14l6 12h12l6-12z" fill="#c7d2fe" />
          <path d="M20 14 10 26h16zM44 14l10 12H38z" fill="#a5b4fc" />
        </svg>
        <figcaption class="tv-curio-case-label">Moon shard</figcaption>
      </figure>
      <figure class="tv-curio-case tv-curio-case--enchanted">
        <span class="tv-curio-case-aura" aria-hidden="true"></span>
        <span class="tv-curio-case-frame" aria-hidden="true"></span>
        <span class="tv-curio-case-glass" aria-hidden="true"></span>
        <span class="tv-curio-case-count">×12</span>
        <svg class="tv-curio-case-exhibit" viewBox="0 0 64 64" aria-hidden="true">
          <path d="M20 14h24l10 12-22 28-22-28z" fill="#818cf8" />
          <path d="M10 26h44L32 54z" fill="#6366f1" />
          <path d="M26 26h12L32 54z" fill="#a5b4fc" />
          <path d="M20 14l6 12h12l6-12z" fill="#c7d2fe" />
          <path d="M20 14 10 26h16zM44 14l10 12H38z" fill="#a5b4fc" />
        </svg>
        <figcaption class="tv-curio-case-label">Starlight gem</figcaption>
      </figure>
    </div>
    <div class="tv-lost-fantasy-scene-column">
      <div class="tv-prismatic-panel">
        <span class="tv-prismatic-panel-light" aria-hidden="true">
          <span class="tv-prismatic-panel-edge"></span>
          <span class="tv-prismatic-panel-fill"></span>
          <span class="tv-prismatic-panel-tint"></span>
          <span class="tv-prismatic-panel-sweep"></span>
        </span>
        <div class="tv-prismatic-panel-body">
          <h3 class="tv-prismatic-panel-title">Shrine blessing</h3>
          <p class="tv-prismatic-panel-text">+10% XP · +5% luck · ends in 2h 14m</p>
        </div>
        <span class="tv-prismatic-panel-corners" aria-hidden="true"></span>
      </div>
      <div class="tv-rpg-panel tv-rpg-panel--rare">
        <h3 class="tv-rpg-panel-title">Quest: The Lantern Road</h3>
        <p class="tv-rpg-panel-subtitle">Light 3 of 5 lanterns before dawn</p>
      </div>
    </div>
  </div>
</div>
```

```css
/* A night scene: fireflies behind a gilded title, a character sheet, two curio cases and a blessing. Stacks when its container is narrow. */
.tv-lost-fantasy-scene {
  position: relative;
  isolation: isolate;
  padding: 28px 24px 30px;
  overflow: hidden;
  background: #0b0a12;
}

/* The particle layer stretches behind the whole scene. */
.tv-lost-fantasy-scene > .tv-ambient-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: auto;
  border-radius: 0;
}

.tv-lost-fantasy-scene-title {
  margin-bottom: 22px;
  text-align: center;
}

.tv-lost-fantasy-scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.tv-lost-fantasy-scene-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.tv-lost-fantasy-scene-curios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@container (max-width: 760px) {
  .tv-lost-fantasy-scene-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
```