# Prism

> Dark, liquid-glass landing page for an AI web design agency: a fixed glass pill nav, a full-screen video hero whose headline blurs in word by word over a partners row, a video-backed how-it-works statement, alternating feature rows with looping media, a four-card benefits grid, a stats band over a desaturated video, three testimonials and a video call to action that carries the footer. Self-contained pure-black palette, Barlow + Instrument Serif type, CSS entrances only.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/prism).

- Page, with a live preview: https://shadcn.exchange/r/hirael/prism
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/prism-light-dbc6b92b61a0caf3.png
- Registry item: https://hirael.com/r/prism.json
- Categories: templates
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hirael.com/r/prism.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `registry/hirael/bases/radix/templates/prism/prism.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { cn } from '@/lib/utils';

import { Benefits } from './benefits';
import { Cta } from './cta';
import { Features } from './features';
import { barlow, instrumentSerif } from './fonts';
import { Hero } from './hero';
import { Navbar } from './navbar';
import { Process } from './process';
import { Stats } from './stats';
import { PrismStyles } from './styles';
import { Testimonials } from './testimonials';

const Prism = () => {
  return (
    <div
      className={cn(
        'prism',
        barlow.variable,
        instrumentSerif.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
        '[font-family:var(--font-prism-sans),ui-sans-serif,sans-serif]',
      )}
    >
      <PrismStyles />
      <Navbar />
      <Hero />
      <Process />
      <Features />
      <Benefits />
      <Stats />
      <Testimonials />
      <Cta />
    </div>
  );
};

export default Prism;
```

### `registry/hirael/bases/radix/templates/prism/navbar.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { ArrowUpRight, Menu, X } from 'lucide-react';

import { Button } from '@/registry/hirael/bases/radix/ui/button';

import { Wordmark } from './primitives';

const NAV_LINKS = [
  { label: 'Home', href: '#home' },
  { label: 'Services', href: '#services' },
  { label: 'Work', href: '#work' },
  { label: 'Process', href: '#process' },
  { label: 'Pricing', href: '#pricing' },
] as const;

export const Navbar = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <header data-slot="navbar" className="fixed inset-x-0 top-4 z-50 px-6 lg:px-16">
      <nav className="flex items-center justify-between gap-4 md:grid md:grid-cols-[1fr_auto_1fr]">
        <a href="#home" aria-label="Prism home" className="justify-self-start">
          <Wordmark />
        </a>

        <div className="liquid-glass flex items-center gap-1 rounded-full p-1.5 md:ps-2">
          <div className="hidden items-center md:flex">
            {NAV_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="px-3 py-2 text-sm font-medium text-foreground/90 transition-colors hover:text-foreground"
              >
                {link.label}
              </a>
            ))}
          </div>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label={isOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={isOpen}
            onClick={() => setIsOpen((value) => !value)}
            className="md:hidden"
          >
            {isOpen ? <X className="size-4" /> : <Menu className="size-4" />}
          </Button>
          <Button type="button" size="sm">
            Get Started
            <ArrowUpRight className="size-4 rtl:-scale-x-100" />
          </Button>
        </div>
      </nav>

      {isOpen ? (
        <div className="liquid-glass mt-3 flex flex-col rounded-3xl p-2 md:hidden">
          {NAV_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              onClick={() => setIsOpen(false)}
              className="rounded-full px-4 py-2.5 text-sm font-medium text-foreground/90 transition-colors hover:bg-foreground/10 hover:text-foreground"
            >
              {link.label}
            </a>
          ))}
        </div>
      ) : null}
    </header>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/hero.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowUpRight, Play } from 'lucide-react';

import { Button } from '@/registry/hirael/bases/radix/ui/button';

import { GlassButton, GlassPill, RiseText, VideoBackdrop } from './primitives';

const HERO_VIDEO = 'https://hirael.com/media/templates/prism/hero.mp4';

const PARTNERS = ['Luminary', 'Arcline', 'Helix', 'Vela', 'Northwind'] as const;

interface HeroProps {
  videoSrc?: string;
  posterSrc?: string;
}

export const Hero = ({ videoSrc = HERO_VIDEO, posterSrc }: HeroProps) => {
  return (
    <section id="home" data-slot="hero" className="relative flex min-h-svh flex-col overflow-hidden">
      <VideoBackdrop src={videoSrc} posterSrc={posterSrc} />
      <div aria-hidden className="absolute inset-0 z-0 bg-background/5" />

      <div className="relative z-10 flex flex-1 flex-col items-center px-6 pt-36 text-center md:pt-44">
        <p className="rise liquid-glass flex items-center gap-2 rounded-full p-1 pe-3 text-sm text-foreground/90">
          <span className="rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">New</span>
          Introducing AI-powered web design.
        </p>

        <h1 className="mt-6 max-w-3xl [font-family:var(--font-prism-serif)] text-6xl leading-[0.85] tracking-[-2px] text-foreground italic md:text-7xl lg:text-[5.5rem] lg:tracking-[-4px]">
          <RiseText text="The Website Your Brand Deserves" />
        </h1>

        <p className="rise-still mt-6 max-w-2xl text-sm leading-relaxed font-light text-foreground [animation-delay:0.8s] md:text-base">
          Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined.
        </p>

        <div className="rise mt-8 flex flex-wrap items-center justify-center gap-6 [animation-delay:1.1s]">
          <GlassButton>
            Get Started
            <ArrowUpRight className="size-5 rtl:-scale-x-100" />
          </GlassButton>
          <Button type="button" variant="ghost">
            Watch the Film
            <Play className="size-4 fill-current" />
          </Button>
        </div>

        <div data-slot="partners" className="rise mt-auto flex flex-col items-center gap-6 pt-16 pb-8">
          <GlassPill>Trusted by the teams behind</GlassPill>
          <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4">
            {PARTNERS.map((partner) => (
              <li
                key={partner}
                className="[font-family:var(--font-prism-serif)] text-2xl tracking-tight text-foreground italic md:text-3xl"
              >
                {partner}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/process.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowUpRight } from 'lucide-react';

import { GlassButton, GlassPill, Heading, VideoBackdrop } from './primitives';

const PROCESS_VIDEO = 'https://hirael.com/media/templates/prism/process.mp4';

export const Process = () => {
  return (
    <section
      id="process"
      data-slot="process"
      className="relative flex min-h-[700px] items-center overflow-hidden px-6 py-32 md:px-16 lg:px-24"
    >
      <VideoBackdrop src={PROCESS_VIDEO} fadeTop />

      <div className="rise relative z-10 mx-auto flex min-h-[500px] w-full max-w-3xl flex-col items-center justify-center text-center">
        <GlassPill className="mb-4">How It Works</GlassPill>
        <Heading>You dream it. We ship it.</Heading>
        <p className="mt-6 max-w-xl text-sm leading-relaxed font-light text-foreground/60 md:text-base">
          Share your vision. Our AI handles the rest: wireframes, design, code, launch. All in days, not quarters.
        </p>
        <GlassButton className="mt-8">
          Get Started
          <ArrowUpRight className="size-5 rtl:-scale-x-100" />
        </GlassButton>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/features.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { cn } from '@/lib/utils';

import { GlassButton, SectionIntro, VideoBackdrop } from './primitives';

const FEATURES = [
  {
    title: 'Designed to convert. Built to perform.',
    description:
      'Every pixel is intentional. Our AI studies what works across thousands of top sites, then builds yours to outperform them all.',
    action: 'Learn more',
    videoSrc: 'https://hirael.com/media/templates/prism/stats.mp4',
    reverse: false,
  },
  {
    title: 'It gets smarter. Automatically.',
    description:
      'Your site evolves on its own. AI monitors every click, scroll, and conversion, then optimizes in real time. No manual updates. Ever.',
    action: 'See how it works',
    videoSrc: 'https://hirael.com/media/templates/prism/cta.mp4',
    reverse: true,
  },
] as const;

export const Features = () => {
  return (
    <section id="services" data-slot="features" className="px-6 py-24 md:px-16 lg:px-24">
      <div className="mx-auto max-w-6xl">
        <SectionIntro kicker="Capabilities" title="Pro features. Zero complexity." />

        <div className="mt-16 flex flex-col gap-16 md:mt-20 md:gap-24">
          {FEATURES.map((feature) => (
            <article
              key={feature.title}
              className={cn(
                'rise flex flex-col items-center gap-10 lg:flex-row lg:gap-16',
                feature.reverse && '[animation-delay:150ms] lg:flex-row-reverse',
              )}
            >
              <div className="flex-1">
                <h3 className="[font-family:var(--font-prism-serif)] text-3xl leading-[0.95] tracking-tight text-foreground italic md:text-4xl">
                  {feature.title}
                </h3>
                <p className="mt-5 max-w-md text-sm leading-relaxed font-light text-foreground/60">
                  {feature.description}
                </p>
                <GlassButton className="mt-8">{feature.action}</GlassButton>
              </div>

              <div className="liquid-glass relative aspect-[4/3] w-full flex-1 overflow-hidden rounded-2xl">
                <VideoBackdrop src={feature.videoSrc} fadeBottom={false} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/benefits.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ChartColumn, Palette, Shield, Zap } from 'lucide-react';

import { cn } from '@/lib/utils';

import { SectionIntro } from './primitives';

const BENEFITS = [
  {
    Icon: Zap,
    title: 'Days, Not Months',
    description: 'Concept to launch at a pace that redefines fast.',
    delay: '',
  },
  {
    Icon: Palette,
    title: 'Obsessively Crafted',
    description: 'Every detail considered. Every element refined.',
    delay: '[animation-delay:100ms]',
  },
  {
    Icon: ChartColumn,
    title: 'Built to Convert',
    description: 'Layouts informed by data. Decisions backed by performance.',
    delay: '[animation-delay:200ms]',
  },
  {
    Icon: Shield,
    title: 'Secure by Default',
    description: 'Enterprise-grade protection comes standard.',
    delay: '[animation-delay:300ms]',
  },
] as const;

export const Benefits = () => {
  return (
    <section id="work" data-slot="benefits" className="px-6 py-24 md:px-16 lg:px-24">
      <div className="mx-auto max-w-6xl">
        <SectionIntro kicker="Why Us" title="The difference is everything." />

        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
          {BENEFITS.map(({ Icon, title, description, delay }) => (
            <article key={title} className={cn('rise liquid-glass rounded-2xl p-6', delay)}>
              <span className="liquid-glass-strong flex size-10 items-center justify-center rounded-full text-foreground">
                <Icon className="size-4" aria-hidden />
              </span>
              <h3 className="mt-6 [font-family:var(--font-prism-serif)] text-lg text-foreground italic">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed font-light text-foreground/60">{description}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/stats.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { VideoBackdrop } from './primitives';

const STATS_VIDEO = 'https://hirael.com/media/templates/prism/stats.mp4';

const STATS = [
  { value: '200+', label: 'Sites launched' },
  { value: '98%', label: 'Client satisfaction' },
  { value: '3.2x', label: 'More conversions' },
  { value: '5 days', label: 'Average delivery' },
] as const;

export const Stats = () => {
  return (
    <section data-slot="stats" className="relative overflow-hidden px-6 py-32 md:px-16 lg:px-24">
      <VideoBackdrop src={STATS_VIDEO} fadeTop className="saturate-0" />

      <dl className="rise liquid-glass relative z-10 mx-auto grid max-w-6xl grid-cols-2 gap-8 rounded-3xl p-12 text-center md:p-16 lg:grid-cols-4">
        {STATS.map((stat) => (
          <div key={stat.label} className="flex flex-col gap-2">
            <dt className="order-2 text-sm font-light text-foreground/60">{stat.label}</dt>
            <dd className="[font-family:var(--font-prism-serif)] text-4xl tracking-tight text-foreground italic tabular-nums md:text-5xl lg:text-6xl">
              {stat.value}
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/testimonials.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { cn } from '@/lib/utils';

import { SectionIntro } from './primitives';

const TESTIMONIALS = [
  {
    quote:
      'A complete rebuild in five days. The new site beats the old one on every metric we track, and the brief we wrote was a single paragraph.',
    name: 'Sarah Chen',
    role: 'CEO, Luminary',
    delay: '',
  },
  {
    quote:
      'Conversions up 4x in the first month. The site keeps testing and tuning itself, so the numbers kept climbing long after launch.',
    name: 'Marcus Webb',
    role: 'Head of Growth, Arcline',
    delay: '[animation-delay:100ms]',
  },
  {
    quote:
      "They didn't just design our site. They understood the brand well enough to make the calls we would have made ourselves, only faster.",
    name: 'Elena Voss',
    role: 'Brand Director, Helix',
    delay: '[animation-delay:200ms]',
  },
] as const;

export const Testimonials = () => {
  return (
    <section id="pricing" data-slot="testimonials" className="px-6 py-24 md:px-16 lg:px-24">
      <div className="mx-auto max-w-6xl">
        <SectionIntro kicker="What They Say" title="Don't take our word for it." />

        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
          {TESTIMONIALS.map((testimonial) => (
            <figure
              key={testimonial.name}
              className={cn('rise liquid-glass flex flex-col rounded-2xl p-8', testimonial.delay)}
            >
              <blockquote className="flex-1 text-sm leading-relaxed font-light text-foreground/80 italic">
                &ldquo;{testimonial.quote}&rdquo;
              </blockquote>
              <figcaption className="mt-8">
                <p className="text-sm font-medium text-foreground">{testimonial.name}</p>
                <p className="mt-1 text-xs font-light text-foreground/50">{testimonial.role}</p>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/cta.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Button } from '@/registry/hirael/bases/radix/ui/button';

import { Footer } from './footer';
import { GlassButton, Heading, VideoBackdrop } from './primitives';

const CTA_VIDEO = 'https://hirael.com/media/templates/prism/cta.mp4';

export const Cta = () => {
  return (
    <section data-slot="cta" className="relative overflow-hidden px-6 pt-32 pb-8 md:px-16 lg:px-24">
      <VideoBackdrop src={CTA_VIDEO} fadeTop />

      <div className="relative z-10 mx-auto max-w-6xl">
        <div className="rise flex flex-col items-center text-center">
          <Heading className="max-w-3xl md:text-6xl lg:text-7xl">Your next website starts here.</Heading>
          <p className="mt-6 max-w-md text-sm leading-relaxed font-light text-foreground/60 md:text-base">
            Book a free strategy call. See what AI-powered design can do.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
            <GlassButton>Book a Call</GlassButton>
            <Button type="button">View Pricing</Button>
          </div>
        </div>

        <Footer />
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/footer.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

const FOOTER_LINKS = ['Privacy', 'Terms', 'Contact'] as const;

export const Footer = () => {
  return (
    <footer
      data-slot="footer"
      className="mt-32 flex flex-col items-center justify-between gap-4 border-t border-foreground/10 pt-8 text-xs text-foreground/40 sm:flex-row"
    >
      <p>&copy; 2026 Prism. All rights reserved.</p>
      <nav className="flex items-center gap-6">
        {FOOTER_LINKS.map((link) => (
          <a key={link} href="#" className="transition-colors hover:text-foreground">
            {link}
          </a>
        ))}
      </nav>
    </footer>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/primitives.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';

import { cn } from '@/lib/utils';

interface WordmarkProps {
  className?: string;
}

export const Wordmark = ({ className }: WordmarkProps) => {
  return <span className={cn('text-lg font-medium tracking-tight text-foreground', className)}>Prism</span>;
};

interface GlassPillProps {
  children: React.ReactNode;
  className?: string;
}

export const GlassPill = ({ children, className }: GlassPillProps) => {
  return (
    <span
      className={cn(
        'liquid-glass inline-block rounded-full px-3.5 py-1 text-xs font-medium text-foreground',
        className,
      )}
    >
      {children}
    </span>
  );
};

type GlassButtonProps = React.ComponentProps<'button'>;

export const GlassButton = ({ className, ...props }: GlassButtonProps) => {
  return (
    <button
      type="button"
      data-slot="glass-button"
      className={cn(
        'liquid-glass-strong inline-flex shrink-0 items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium whitespace-nowrap text-foreground transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
        className,
      )}
      {...props}
    />
  );
};

interface HeadingProps {
  children: React.ReactNode;
  className?: string;
}

export const Heading = ({ children, className }: HeadingProps) => {
  return (
    <h2
      className={cn(
        '[font-family:var(--font-prism-serif)] text-4xl leading-[0.9] tracking-tight text-foreground italic md:text-5xl lg:text-6xl',
        className,
      )}
    >
      {children}
    </h2>
  );
};

interface SectionIntroProps {
  kicker: string;
  title: string;
}

export const SectionIntro = ({ kicker, title }: SectionIntroProps) => {
  return (
    <div className="rise flex flex-col items-center text-center">
      <GlassPill className="mb-4">{kicker}</GlassPill>
      <Heading>{title}</Heading>
    </div>
  );
};

const WORD_DELAY_MS = 100;

interface RiseTextProps {
  text: string;
}

export const RiseText = ({ text }: RiseTextProps) => {
  return (
    <span dir="auto" className="inline-flex flex-wrap justify-center gap-x-[0.25em]">
      {text.split(' ').map((word, index) => (
        <span key={`${word}-${index}`} className="word-rise" style={{ animationDelay: `${index * WORD_DELAY_MS}ms` }}>
          {word}
        </span>
      ))}
    </span>
  );
};

interface VideoBackdropProps {
  src: string;
  posterSrc?: string;
  fadeTop?: boolean;
  fadeBottom?: boolean;
  className?: string;
}

export const VideoBackdrop = ({
  src,
  posterSrc,
  fadeTop = false,
  fadeBottom = true,
  className,
}: VideoBackdropProps) => {
  const [hasFailed, setHasFailed] = React.useState(false);

  return (
    <>
      {hasFailed ? (
        <div
          aria-hidden
          className="absolute inset-0 z-0 bg-gradient-to-b from-muted via-background to-background bg-cover bg-center"
          style={posterSrc ? { backgroundImage: `url(${posterSrc})` } : undefined}
        />
      ) : (
        <video
          className={cn('absolute inset-0 z-0 h-full w-full object-cover', className)}
          src={src}
          poster={posterSrc}
          autoPlay
          loop
          muted
          playsInline
          aria-hidden
          tabIndex={-1}
          onError={() => setHasFailed(true)}
        />
      )}
      {fadeTop ? (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 z-[1] h-[200px] bg-gradient-to-b from-background to-transparent"
        />
      ) : null}
      {fadeBottom ? (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 bottom-0 z-[1] h-[200px] bg-gradient-to-t from-background to-transparent"
        />
      ) : null}
    </>
  );
};
```

### `registry/hirael/bases/radix/templates/prism/styles.tsx`

```tsx
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

const PRISM_CSS = `
.prism {
  --background: hsl(0 0% 0%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(0 0% 5%);
  --card-foreground: hsl(0 0% 100%);
  --popover: hsl(0 0% 5%);
  --popover-foreground: hsl(0 0% 100%);
  --primary: hsl(0 0% 100%);
  --primary-foreground: hsl(0 0% 0%);
  --secondary: hsl(0 0% 10%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(0 0% 10%);
  --muted-foreground: hsl(0 0% 60%);
  --accent: hsl(0 0% 100% / 0.06);
  --accent-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 100% / 0.2);
  --input: hsl(0 0% 100% / 0.2);
  --ring: hsl(0 0% 100%);
  --radius: 0.75rem;
}
.prism ::selection {
  background: rgba(255, 255, 255, 0.25);
  color: #000;
}
.prism .liquid-glass,
.prism .liquid-glass-strong {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.prism .liquid-glass-strong {
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow:
    4px 4px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.prism .liquid-glass::before,
.prism .liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.prism .liquid-glass-strong::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0.5) 100%
  );
}
.prism .rise {
  animation-name: prism-rise;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
/* Headline words and the lead only move: text that starts at opacity 0 or blurred holds back Largest Contentful Paint. */
.prism .rise-still {
  animation-name: prism-rise-still;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.prism .word-rise {
  display: inline-block;
  animation-name: prism-word-rise;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
@keyframes prism-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes prism-rise-still {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes prism-word-rise {
  0% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prism .rise,
  .prism .rise-still,
  .prism .word-rise {
    animation: none;
  }
}
`;

export const PrismStyles = () => {
  return <style dangerouslySetInnerHTML={{ __html: PRISM_CSS }} />;
};
```

### `registry/hirael/bases/radix/templates/prism/fonts.ts`

```ts
// Prism from Hirael <https://hirael.com/templates/prism>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Barlow, Instrument_Serif } from 'next/font/google';

export const barlow = Barlow({
  variable: '--font-prism-sans',
  subsets: ['latin'],
  weight: ['300', '400', '500', '600'],
  display: 'swap',
});

export const instrumentSerif = Instrument_Serif({
  variable: '--font-prism-serif',
  subsets: ['latin'],
  weight: '400',
  style: ['normal', 'italic'],
  display: 'swap',
});
```