# Velorah

> Dark, premium landing page for an electric RV brand: a full-screen video hero with liquid-glass navigation, a centered tagline, a split feature card with switchable tabs, an HLS streaming statement with a stats row, a video preorder call to action and a multi-column footer. Self-contained pure-black palette, Inter + Instrument Serif type.

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

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

## Install

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

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

## Dependencies

- Registry items: `toggle-group`

## Files

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

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

'use client';

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

import { Cta } from './cta';
import { Feature } from './feature';
import { inter, instrumentSerif } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { Statement } from './statement';
import { Tagline } from './tagline';
import { VelorahStyles } from './styles';

const Velorah = () => {
  return (
    <div
      className={cn(
        'velorah',
        inter.variable,
        instrumentSerif.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
        '[font-family:var(--font-velorah-sans),ui-sans-serif,sans-serif]',
      )}
    >
      <VelorahStyles />
      <Hero />
      <Tagline />
      <Feature />
      <Statement />
      <Cta />
      <Footer />
    </div>
  );
};

export default Velorah;
```

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

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

import { PillButton, Wordmark } from './primitives';

const NAV_LINKS = [
  { label: 'Home', href: '#' },
  { label: 'Studio', href: '#' },
  { label: 'About', href: '#' },
  { label: 'Journal', href: '#' },
  { label: 'Reach Us', href: '#' },
];

export const Navbar = () => {
  return (
    <nav className="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-8 py-6">
      <Wordmark className="text-3xl" />

      <div className="hidden items-center gap-10 text-sm text-foreground md:flex">
        {NAV_LINKS.map((link) => (
          <a key={link.label} href={link.href} className="transition-colors hover:text-foreground/80">
            {link.label}
          </a>
        ))}
      </div>

      <PillButton className="px-6 py-2.5">Begin Journey</PillButton>
    </nav>
  );
};
```

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

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

'use client';

import * as React from 'react';

import { Navbar } from './navbar';
import { PillButton } from './primitives';

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

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

export const Hero = ({ videoSrc = HERO_VIDEO, posterSrc }: HeroProps) => {
  const [videoFailed, setVideoFailed] = React.useState(false);

  return (
    <section className="relative min-h-screen overflow-hidden">
      {videoFailed ? (
        <div
          aria-hidden="true"
          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="absolute inset-0 z-0 h-full w-full object-cover"
          src={videoSrc}
          poster={posterSrc}
          autoPlay
          loop
          muted
          playsInline
          aria-hidden="true"
          tabIndex={-1}
          onError={() => setVideoFailed(true)}
        />
      )}
      <div
        aria-hidden="true"
        className="absolute inset-x-0 bottom-0 z-[1] h-[40%] bg-linear-to-t from-background via-background/60 to-transparent"
      />

      <Navbar />

      <div className="relative z-10 flex flex-col items-center justify-center px-6 pt-[28px] pb-40 text-center">
        <h1 className="animate-rise max-w-7xl [font-family:var(--font-velorah-serif)] text-5xl leading-[0.95] font-normal tracking-[-2.46px] text-foreground sm:text-7xl md:text-8xl">
          Where <em className="not-italic">dreams</em> rise <em className="not-italic">through the silence.</em>
        </h1>

        <p className="animate-rise-delay mt-8 max-w-2xl text-base leading-relaxed text-foreground sm:text-lg">
          We&apos;re designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build
          digital spaces for sharp focus and inspired work.
        </p>

        <PillButton className="animate-fade-rise-delay-2 mt-12 px-14 py-5 text-base">Begin Journey</PillButton>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/velorah/tagline.tsx`

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

export const Tagline = () => {
  return (
    <section className="flex min-h-[70vh] items-center justify-center bg-[hsl(0,0%,0%)] px-6">
      <h2 className="max-w-4xl text-center [font-family:var(--font-velorah-serif)] text-4xl leading-[1.05] tracking-[-1.5px] text-foreground sm:text-6xl md:text-7xl">
        So you can feel at home,
        <br />
        anywhere.
      </h2>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/velorah/feature.tsx`

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

'use client';

import * as React from 'react';

import { ToggleGroup, ToggleGroupItem } from '@/registry/hirael/bases/radix/ui/toggle-group';

import { PillButton } from './primitives';

const FEATURE_VIDEO = 'https://hirael.com/media/templates/velorah/feature.mp4';

const FEATURE_TABS = [
  {
    id: 'electric',
    label: 'Living Electric',
    heading: '100% Electric',
    description: 'No more fossil fuels, buzzing generators, and propane tanks. Velorah has power for days.',
    progress: 35,
  },
  {
    id: 'charge',
    label: 'Charge Faster',
    heading: 'Full in 40 minutes',
    description: 'Fast charging takes the battery from empty to full in the time it takes to stop for lunch.',
    progress: 60,
  },
  {
    id: 'sleep',
    label: 'Sleep Well',
    heading: 'Rest like home',
    description: 'A full-size bed, blackout shades, and quiet climate control keep the night undisturbed.',
    progress: 78,
  },
  {
    id: 'acoustic',
    label: 'Acoustic Comfort',
    heading: 'Quiet by design',
    description: 'Insulated walls and a silent drivetrain keep cabin noise down to a whisper.',
    progress: 52,
  },
  {
    id: 'seasons',
    label: '5+ Seasons',
    heading: 'Ready for any weather',
    description: 'Heated floors and thermal glass carry you from summer heat to deep winter.',
    progress: 90,
  },
];

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

export const Feature = ({ videoSrc = FEATURE_VIDEO, posterSrc }: FeatureProps) => {
  const [activeId, setActiveId] = React.useState(FEATURE_TABS[0].id);
  const [videoFailed, setVideoFailed] = React.useState(false);

  const active = FEATURE_TABS.find((tab) => tab.id === activeId) ?? FEATURE_TABS[0];

  return (
    <section className="mx-auto max-w-7xl px-6 py-0 md:px-12">
      <div className="grid min-h-[520px] gap-4 overflow-hidden rounded-2xl md:grid-cols-2">
        <div className="flex flex-col justify-between rounded-2xl bg-card p-10 md:p-14">
          <div>
            <span className="mb-8 inline-block h-8 w-8 rounded-full border border-border" />
            <h2 className="mb-6 [font-family:var(--font-velorah-serif)] text-3xl tracking-[-1px] text-foreground sm:text-5xl">
              {active.heading}
            </h2>
            <p className="max-w-sm text-sm leading-relaxed text-muted-foreground sm:text-base">{active.description}</p>
          </div>

          <div>
            <ToggleGroup
              type="single"
              variant="outline"
              size="sm"
              spacing={2}
              value={active.id}
              onValueChange={(id) => {
                if (id) setActiveId(id);
              }}
              className="mb-8 flex-wrap"
            >
              {FEATURE_TABS.map((tab) => (
                <ToggleGroupItem key={tab.id} value={tab.id}>
                  {tab.label}
                </ToggleGroupItem>
              ))}
            </ToggleGroup>

            <div className="mb-6 h-0.5 w-full rounded-full bg-border">
              <div
                className="h-full rounded-full bg-foreground transition-[width] duration-500 ease-out"
                style={{ width: `${active.progress}%` }}
              />
            </div>

            <PillButton className="px-8 py-3">Explore the Velorah Flow</PillButton>
          </div>
        </div>

        <div className="relative min-h-[400px] overflow-hidden rounded-2xl">
          {videoFailed ? (
            <div
              aria-hidden="true"
              className="absolute inset-0 bg-gradient-to-br from-muted via-card to-background bg-cover bg-center"
              style={posterSrc ? { backgroundImage: `url(${posterSrc})` } : undefined}
            />
          ) : (
            <video
              className="absolute inset-0 h-full w-full object-cover"
              src={videoSrc}
              poster={posterSrc}
              autoPlay
              loop
              muted
              playsInline
              aria-hidden="true"
              tabIndex={-1}
              onError={() => setVideoFailed(true)}
            />
          )}
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/velorah/statement.tsx`

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

import { PillButton } from './primitives';

const STATEMENT_VIDEO = 'https://hirael.com/media/templates/velorah/statement.mp4';

const STATS = [
  { value: 'OTA', label: 'Over-the-air updates' },
  { value: '360°', label: 'System visibility' },
  { value: 'AI', label: 'Adaptive routines' },
  { value: '24/7', label: 'Remote monitoring' },
];

export const Statement = () => {
  return (
    <section className="relative flex min-h-[90vh] flex-col items-center justify-center overflow-hidden px-6">
      <video
        src={STATEMENT_VIDEO}
        autoPlay
        loop
        muted
        playsInline
        aria-hidden
        className="absolute inset-0 z-0 h-full w-full object-cover"
      />

      <div className="relative z-10 flex max-w-5xl flex-col items-center text-center">
        <p className="mb-6 text-xs tracking-[0.3em] text-muted-foreground uppercase sm:text-sm">
          Intelligent Companion
        </p>

        <h2 className="[font-family:var(--font-velorah-serif)] text-4xl leading-[1.05] tracking-[-1.5px] text-foreground sm:text-6xl md:text-7xl">
          Adventure inspired.
          <br />
          App driven.
        </h2>

        <p className="mt-8 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
          One app to control climate, lighting, navigation, and energy. Monitor every system in real time, automate your
          routines, and let Velorah learn how you live on the road.
        </p>

        <div className="mt-14 grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12">
          {STATS.map((stat) => (
            <div key={stat.label}>
              <div className="[font-family:var(--font-velorah-serif)] text-3xl font-light text-foreground sm:text-4xl">
                {stat.value}
              </div>
              <div className="text-xs text-muted-foreground sm:text-sm">{stat.label}</div>
            </div>
          ))}
        </div>

        <PillButton className="mt-12 px-10 py-4">Discover the App</PillButton>
      </div>
    </section>
  );
};
```

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

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

import { PillButton } from './primitives';

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

export const Cta = () => {
  return (
    <section className="relative flex min-h-[90vh] flex-col items-center justify-center overflow-hidden px-6 text-center">
      <video
        className="absolute inset-0 z-0 h-full w-full object-cover"
        src={CTA_VIDEO}
        autoPlay
        loop
        muted
        playsInline
        aria-hidden="true"
        tabIndex={-1}
      />

      <div className="relative z-10 flex max-w-4xl flex-col items-center">
        <p className="mb-4 text-xs tracking-[0.3em] text-muted-foreground uppercase sm:text-sm">Starting at $99,000</p>

        <h2 className="[font-family:var(--font-velorah-serif)] text-5xl leading-[0.95] tracking-[-2px] text-foreground sm:text-7xl md:text-8xl">
          Join the ride
        </h2>

        <p className="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
          Reserve your Velorah today with a fully refundable $500 deposit. Early adopters receive priority delivery and
          exclusive founding-member benefits.
        </p>

        <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row">
          <PillButton className="px-10 py-4">Preorder Now</PillButton>
          <PillButton tone="outline" className="px-10 py-4">
            Schedule a Tour
          </PillButton>
        </div>
      </div>
    </section>
  );
};
```

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

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

import { PillButton, Wordmark } from './primitives';

const FOOTER_LINKS = ['product', 'app', 'company', 'community', 'press', 'preorder'];

export const Footer = () => {
  return (
    <footer className="mx-auto max-w-7xl border-t border-border bg-[hsl(0,0%,0%)] px-6 py-16 md:px-12">
      <div className="mb-16 grid grid-cols-1 gap-12 md:grid-cols-3">
        <h2 className="[font-family:var(--font-velorah-serif)] text-2xl leading-tight text-foreground sm:text-3xl">
          Where home
          <br />
          meets the road.
        </h2>

        <nav className="flex flex-col items-start gap-3">
          {FOOTER_LINKS.map((link) => (
            <a
              key={link}
              href="#"
              className="text-sm text-muted-foreground capitalize transition-colors hover:text-foreground"
            >
              {link}
            </a>
          ))}
        </nav>

        <div>
          <p className="mb-4 text-sm text-muted-foreground">
            Subscribe for the latest
            <br />
            Velorah updates.
          </p>
          <PillButton className="px-6 py-2.5">Subscribe</PillButton>
        </div>
      </div>

      <div className="flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs text-muted-foreground md:flex-row">
        <Wordmark className="text-xl" />
        <div className="flex items-center gap-6">
          <a href="#" className="transition-colors hover:text-foreground">
            Privacy Policy
          </a>
          <a href="#" className="transition-colors hover:text-foreground">
            Terms &amp; Conditions
          </a>
        </div>
      </div>
    </footer>
  );
};
```

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

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

import type { ComponentProps } from 'react';

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

interface WordmarkProps {
  className?: string;
}

export const Wordmark = ({ className }: WordmarkProps) => {
  return (
    <span className={cn('[font-family:var(--font-velorah-serif)] tracking-tight text-foreground', className)}>
      Velorah
      <sup className="text-[0.4em]">&reg;</sup>
    </span>
  );
};

type PillButtonTone = 'glass' | 'outline';

interface PillButtonProps extends ComponentProps<'button'> {
  /** `glass` is the frosted primary pill, `outline` the quiet bordered one. */
  tone?: PillButtonTone;
}

export const PillButton = ({ tone = 'glass', className, ...props }: PillButtonProps) => {
  return (
    <button
      type="button"
      className={cn(
        'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full text-sm font-normal whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
        tone === 'glass'
          ? 'liquid-glass text-foreground transition-transform hover:scale-[1.03]'
          : 'border border-border text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground',
        className,
      )}
      {...props}
    />
  );
};
```

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

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

const VELORAH_CSS = `
.velorah {
  --background: hsl(0 0% 0%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(0 0% 6%);
  --card-foreground: hsl(0 0% 100%);
  --primary: hsl(0 0% 100%);
  --primary-foreground: hsl(0 0% 4%);
  --secondary: hsl(0 0% 10%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(0 0% 10%);
  --muted-foreground: hsl(240 4% 66%);
  --accent: hsl(0 0% 10%);
  --accent-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 18%);
  --input: hsl(0 0% 18%);
  --ring: hsl(0 0% 100%);
  --radius: 0.5rem;
}
.velorah .liquid-glass {
  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;
}
.velorah .liquid-glass::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;
}
/* The headline and lead only rise: text that starts at opacity 0 holds back Largest Contentful Paint. */
.velorah .animate-rise,
.velorah .animate-rise-delay {
  animation: velorah-rise 0.8s ease-out both;
}
.velorah .animate-rise-delay {
  animation-delay: 0.2s;
}
.velorah .animate-fade-rise-delay-2 {
  animation: velorah-fade-rise 0.8s ease-out 0.4s both;
}
@keyframes velorah-fade-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes velorah-rise {
  from {
    transform: translateY(24px);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .velorah .animate-rise,
  .velorah .animate-rise-delay,
  .velorah .animate-fade-rise-delay-2 {
    animation: none;
  }
}
`;

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

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

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

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

export const inter = Inter({
  variable: '--font-velorah-sans',
  subsets: ['latin'],
  weight: ['400', '500'],
  display: 'swap',
});

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