A soft spectral light ribbon on pure black — slow liquid motion and a rainbow fringe, drawn by a single WebGL fragment shader.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/spectral-ribbon.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
A glowing C-shaped light trail arcs across a black canvas. Its core runs hot cream, its edges split into a prismatic warm → green → cyan → blue → magenta fringe, and a soft noise warp keeps it drifting like liquid. It is a pure background: put hero content in the default slot.
<script setup lang="ts">
import SpectralRibbon from '~/components/ui/spectral-ribbon/SpectralRibbon.vue';
</script>
<template>
<SpectralRibbon class="h-140 rounded-2xl" :speed="1" :intensity="1">
<div class="flex size-full items-end p-10">
<h1 class="text-5xl font-semibold text-white">Ship in light.</h1>
</div>
</SpectralRibbon>
</template>
Give the root an explicit height — the canvas fills its container and the ribbon reframes itself on square and portrait aspect ratios so the full arc stays visible.
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Animation speed, 0 to 2. Zero freezes the frame. |
intensity | number | 1 | Ribbon brightness, 0.25 to 2. |
thickness | number | 1 | Ribbon thickness, 0.5 to 2. |
grain | number | 0.45 | Film grain amount, 0 to 1. |
class | string | '' | Additional classes for the root container. |
| Slot | Description |
|---|---|
default | Content composed over the ribbon (z-10, filled). |
aria-hidden="true", pointer-events-none); slot content stays fully interactive.prefers-reduced-motion: reduce the ribbon renders one still frame and stops.