# Asme

> Dark, liquid-glass marketing landing page: a full-viewport hero with a cross-fading background video, a frosted glass pill nav and an inline email form, then scroll-revealed about, featured-video, philosophy and services sections, closing on a multi-column footer. Framer Motion throughout, with a self-contained pure-black palette and Instrument Serif accents.

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

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

## Install

```bash
npx shadcn@latest add https://hirael.com/r/asme.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`, `motion`
- Registry items: `button`, `field`

## Files

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

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

'use client';

import { MotionConfig } from 'motion/react';

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

import { About } from './about';
import { FeaturedVideo } from './featured-video';
import { inter, instrumentSerif } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { Philosophy } from './philosophy';
import { Services } from './services';
import { AsmeStyles } from './styles';

const Asme = () => {
  return (
    <MotionConfig reducedMotion="user">
      <main
        className={cn(
          'asme',
          inter.variable,
          instrumentSerif.variable,
          'relative min-h-svh bg-background [font-family:var(--font-asme-sans),ui-sans-serif,sans-serif] text-foreground antialiased',
        )}
      >
        <AsmeStyles />
        <Hero />
        <About />
        <FeaturedVideo />
        <Philosophy />
        <Services />
        <Footer />
      </main>
    </MotionConfig>
  );
};

export default Asme;
```

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

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

'use client';

import * as React from 'react';
import { ArrowRight, Globe } from 'lucide-react';
import { motion, useReducedMotion } from 'motion/react';

import { Button } from '@/registry/hirael/bases/radix/ui/button';
import { Field, FieldLabel } from '@/registry/hirael/bases/radix/ui/field';

import { Navbar } from './navbar';
import { InstagramIcon, TwitterIcon } from './primitives';

const HERO_VIDEO_URL = 'https://hirael.com/media/templates/asme/hero.mp4';
const FADE_MS = 500;
const FADE_OUT_LEAD_S = 0.55;
const RESTART_DELAY_MS = 100;

const SOCIAL_LINKS: {
  label: string;
  Icon: React.ComponentType<{ className?: string }>;
}[] = [
  { label: 'Instagram', Icon: InstagramIcon },
  { label: 'Twitter', Icon: TwitterIcon },
  { label: 'Website', Icon: Globe },
];

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

export const Hero = ({ videoSrc = HERO_VIDEO_URL, posterSrc }: HeroProps) => {
  const reduced = useReducedMotion();
  const restartTimerRef = React.useRef<number | null>(null);
  const [isVisible, setIsVisible] = React.useState(false);
  const [videoFailed, setVideoFailed] = React.useState(false);

  const play = (video: HTMLVideoElement) => {
    void video.play()?.catch(() => undefined);
  };

  // A video that buffered before hydration has already fired `canplay`; catch it on attach.
  const attachVideo = React.useCallback((video: HTMLVideoElement | null) => {
    if (video && video.readyState >= 3) setIsVisible(true);

    return () => {
      if (restartTimerRef.current) window.clearTimeout(restartTimerRef.current);
    };
  }, []);

  return (
    <section className="relative flex min-h-screen flex-col overflow-hidden">
      {videoFailed ? (
        <div
          aria-hidden
          className="glow-top absolute inset-0 bg-cover bg-bottom"
          style={posterSrc ? { backgroundImage: `url(${posterSrc})` } : undefined}
        />
      ) : (
        <motion.video
          ref={attachVideo}
          className="absolute inset-0 h-full w-full object-cover object-bottom"
          src={videoSrc}
          poster={posterSrc}
          muted
          autoPlay
          playsInline
          preload="auto"
          aria-hidden
          tabIndex={-1}
          loop={reduced ?? false}
          initial={{ opacity: 0 }}
          animate={{ opacity: isVisible ? 1 : 0 }}
          transition={{ duration: reduced ? 0 : FADE_MS / 1000, ease: 'linear' }}
          onCanPlay={(event) => {
            if (isVisible) return;
            play(event.currentTarget);
            setIsVisible(true);
          }}
          onTimeUpdate={(event) => {
            const video = event.currentTarget;
            if (reduced || !isVisible || !Number.isFinite(video.duration)) return;
            if (video.duration - video.currentTime <= FADE_OUT_LEAD_S) setIsVisible(false);
          }}
          onEnded={(event) => {
            const video = event.currentTarget;
            restartTimerRef.current = window.setTimeout(() => {
              video.currentTime = 0;
              play(video);
              setIsVisible(true);
            }, RESTART_DELAY_MS);
          }}
          onError={() => setVideoFailed(true)}
        />
      )}

      <Navbar />

      <div className="relative z-10 flex flex-1 -translate-y-[20%] flex-col items-center justify-center px-6 py-12 text-center">
        <h1 className="mb-10 [font-family:var(--font-asme-serif)] text-7xl tracking-tight text-foreground sm:whitespace-nowrap md:text-8xl lg:text-9xl">
          Know it <em className="italic">all</em>.
        </h1>

        <form
          onSubmit={(event) => event.preventDefault()}
          className="liquid-glass w-full max-w-xl rounded-full py-2 ps-6 pe-2"
        >
          <Field orientation="horizontal">
            <FieldLabel htmlFor="asme-hero-email" className="sr-only">
              Email address
            </FieldLabel>
            <input
              id="asme-hero-email"
              type="email"
              autoComplete="email"
              placeholder="Enter your email"
              className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-foreground/40"
            />
            <Button type="submit" size="icon" aria-label="Subscribe" className="size-11">
              <ArrowRight className="size-5 rtl:rotate-180" />
            </Button>
          </Field>
        </form>

        <p className="mt-6 max-w-md px-4 text-sm leading-relaxed text-foreground">
          Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on
          exciting updates.
        </p>

        <button
          type="button"
          className="liquid-glass mt-8 rounded-full px-8 py-3 text-sm font-medium text-foreground transition-colors hover:bg-foreground/5"
        >
          Manifesto
        </button>
      </div>

      <footer className="relative z-10 flex justify-center gap-4 pb-12">
        {SOCIAL_LINKS.map(({ label, Icon }) => (
          <a
            key={label}
            href="#"
            aria-label={label}
            className="liquid-glass inline-flex size-13 items-center justify-center rounded-full text-foreground/80 transition-colors hover:text-foreground"
          >
            <Icon className="size-5" />
          </a>
        ))}
      </footer>
    </section>
  );
};
```

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

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

'use client';

import { Globe } from 'lucide-react';

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

const NAV_LINKS = ['Features', 'Pricing', 'About'];

export const Navbar = () => {
  return (
    <header className="relative z-20 px-6 py-6">
      <nav className="liquid-glass mx-auto flex max-w-5xl items-center justify-between rounded-full px-6 py-3">
        <div className="flex items-center">
          <a href="#" aria-label="Asme home" className="flex items-center gap-2.5">
            <Globe size={24} className="text-foreground" />
            <span className="text-lg font-semibold text-foreground">Asme</span>
          </a>

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

        <div className="flex items-center gap-4">
          <Button type="button" variant="link" className="h-auto">
            Sign Up
          </Button>
          <button
            type="button"
            className="liquid-glass rounded-full px-6 py-2 text-sm font-medium text-foreground transition-colors hover:bg-foreground/5"
          >
            Login
          </button>
        </div>
      </nav>
    </header>
  );
};
```

### `registry/hirael/bases/radix/templates/asme/about.tsx`

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

'use client';

import { motion } from 'motion/react';

import { reveal, Serif } from './primitives';

export const About = () => {
  return (
    <section className="relative overflow-hidden bg-background px-6 pt-32 pb-10 md:pt-44 md:pb-14">
      <div aria-hidden className="glow-top absolute inset-0" />

      <div className="relative mx-auto max-w-5xl text-center">
        <motion.p
          {...reveal({ y: 20, duration: 0.6 })}
          className="mb-8 text-sm tracking-widest text-foreground/40 uppercase"
        >
          About Us
        </motion.p>

        <motion.h2
          {...reveal({ y: 40, duration: 0.8, delay: 0.1 })}
          className="text-4xl leading-[1.1] tracking-tight text-foreground md:text-6xl lg:text-7xl"
        >
          Pioneering <Serif className="text-foreground/60">ideas</Serif> for <br className="hidden md:block" />
          minds that <Serif className="text-foreground/60">create, build, and inspire.</Serif>
        </motion.h2>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/asme/featured-video.tsx`

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

'use client';

import { motion } from 'motion/react';

import { reveal } from './primitives';

const FEATURED_VIDEO_URL = 'https://hirael.com/media/templates/asme/featured.mp4';

export const FeaturedVideo = () => {
  return (
    <section className="overflow-hidden bg-background px-6 pt-6 pb-20 md:pt-10 md:pb-32">
      <div className="mx-auto max-w-6xl">
        <motion.div {...reveal({ y: 60, duration: 0.9 })} className="relative aspect-video overflow-hidden rounded-3xl">
          <video
            className="h-full w-full object-cover"
            src={FEATURED_VIDEO_URL}
            muted
            autoPlay
            loop
            playsInline
            preload="auto"
            aria-hidden
            tabIndex={-1}
          />
          <div
            aria-hidden
            className="absolute inset-0 bg-gradient-to-t from-background/60 via-transparent to-transparent"
          />

          <div className="absolute inset-x-0 bottom-0 flex flex-col gap-6 p-6 md:flex-row md:items-end md:justify-between md:p-10">
            <div className="liquid-glass max-w-md rounded-2xl p-6 md:p-8">
              <p className="mb-3 text-xs tracking-widest text-foreground/50 uppercase">Our Approach</p>
              <p className="text-sm leading-relaxed text-foreground md:text-base">
                We believe in the power of curiosity-driven exploration. Every project starts with a question, and every
                answer opens a new door to innovation.
              </p>
            </div>

            <motion.button
              type="button"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="liquid-glass shrink-0 self-start rounded-full px-8 py-3 text-sm font-medium text-foreground md:self-auto"
            >
              Explore more
            </motion.button>
          </div>
        </motion.div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/asme/philosophy.tsx`

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

'use client';

import * as React from 'react';
import { motion } from 'motion/react';

import { reveal, Serif } from './primitives';

const PHILOSOPHY_VIDEO_URL = 'https://hirael.com/media/templates/asme/philosophy.mp4';

const TEXT_BLOCKS = [
  {
    label: 'Choose your space',
    body: 'Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries.',
  },
  {
    label: 'Shape the future',
    body: 'We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression.',
  },
];

export const Philosophy = () => {
  return (
    <section className="overflow-hidden bg-background px-6 py-28 md:py-40">
      <div className="mx-auto max-w-6xl">
        <motion.h2
          {...reveal({ y: 40, duration: 0.8 })}
          className="mb-16 text-5xl tracking-tight text-foreground md:mb-24 md:text-7xl lg:text-8xl"
        >
          Innovation <Serif className="text-foreground/40">x</Serif> Vision
        </motion.h2>

        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12">
          <motion.div
            {...reveal({ x: -40, duration: 0.8, delay: 0.1 })}
            className="aspect-[4/3] overflow-hidden rounded-3xl"
          >
            <video
              className="h-full w-full object-cover"
              src={PHILOSOPHY_VIDEO_URL}
              muted
              autoPlay
              loop
              playsInline
              preload="auto"
              aria-hidden
              tabIndex={-1}
            />
          </motion.div>

          <motion.div {...reveal({ x: 40, duration: 0.8, delay: 0.2 })} className="flex flex-col justify-center">
            {TEXT_BLOCKS.map((block, index) => (
              <React.Fragment key={block.label}>
                {index > 0 ? <div aria-hidden className="my-10 h-px w-full bg-foreground/10" /> : null}
                <div>
                  <p className="mb-4 text-xs tracking-widest text-foreground/40 uppercase">{block.label}</p>
                  <p className="text-base leading-relaxed text-foreground/70 md:text-lg">{block.body}</p>
                </div>
              </React.Fragment>
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/asme/services.tsx`

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

'use client';

import * as React from 'react';
import { motion } from 'motion/react';
import { ArrowUpRight } from 'lucide-react';

import { reveal } from './primitives';

const SERVICES = [
  {
    videoUrl: 'https://hirael.com/media/templates/asme/services-research.mp4',
    tag: 'Strategy',
    title: 'Research & Insight',
    description:
      'We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change.',
  },
  {
    videoUrl: 'https://hirael.com/media/templates/asme/services-design.mp4',
    tag: 'Craft',
    title: 'Design & Execution',
    description:
      'From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary.',
  },
];

interface ServiceVideoProps {
  src: string;
  posterSrc?: string;
}

const ServiceVideo = ({ src, posterSrc }: ServiceVideoProps) => {
  const [failed, setFailed] = React.useState(false);

  if (failed) {
    return (
      <div
        aria-hidden
        className="glow-center h-full w-full bg-card bg-cover bg-center"
        style={posterSrc ? { backgroundImage: `url(${posterSrc})` } : undefined}
      />
    );
  }

  return (
    <video
      className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
      src={src}
      poster={posterSrc}
      muted
      autoPlay
      loop
      playsInline
      preload="auto"
      aria-hidden
      tabIndex={-1}
      onError={() => setFailed(true)}
    />
  );
};

interface ServicesProps {
  videoSrcs?: string[];
  posterSrcs?: string[];
}

export const Services = ({ videoSrcs, posterSrcs }: ServicesProps) => {
  return (
    <section className="relative overflow-hidden bg-background px-6 py-28 md:py-40">
      <div aria-hidden className="glow-center absolute inset-0" />

      <div className="relative mx-auto max-w-6xl">
        <motion.div {...reveal({ y: 30, duration: 0.7 })} className="mb-12 flex items-end justify-between md:mb-16">
          <h2 className="text-3xl tracking-tight text-foreground md:text-5xl">What we do</h2>
          <p className="hidden text-sm text-foreground/40 md:block">Our services</p>
        </motion.div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
          {SERVICES.map((service, index) => (
            <motion.article
              key={service.tag}
              {...reveal({ y: 50, duration: 0.8, delay: index * 0.15 })}
              className="liquid-glass group overflow-hidden rounded-3xl"
            >
              <div className="relative aspect-video overflow-hidden">
                <ServiceVideo src={videoSrcs?.[index] ?? service.videoUrl} posterSrc={posterSrcs?.[index]} />
                <div aria-hidden className="absolute inset-0 bg-gradient-to-t from-background/40 to-transparent" />
              </div>

              <div className="p-6 md:p-8">
                <div className="mb-4 flex items-center justify-between">
                  <p className="text-xs tracking-widest text-foreground/40 uppercase">{service.tag}</p>
                  <span aria-hidden className="liquid-glass rounded-full p-2 text-foreground">
                    <ArrowUpRight size={18} className="rtl:-scale-x-100" />
                  </span>
                </div>
                <h3 className="mb-3 text-xl tracking-tight text-foreground md:text-2xl">{service.title}</h3>
                <p className="text-sm leading-relaxed text-foreground/50">{service.description}</p>
              </div>
            </motion.article>
          ))}
        </div>
      </div>
    </section>
  );
};
```

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

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

'use client';

import { Globe } from 'lucide-react';

import { InstagramIcon, Serif, TwitterIcon } from './primitives';

const FOOTER_COLUMNS = [
  {
    heading: 'Product',
    links: ['Features', 'Pricing', 'Manifesto', 'Changelog'],
  },
  {
    heading: 'Company',
    links: ['About', 'Careers', 'Contact'],
  },
  {
    heading: 'Resources',
    links: ['Newsletter', 'Privacy', 'Terms'],
  },
];

const SOCIAL_LINKS: {
  label: string;
  Icon: React.ComponentType<{ className?: string }>;
}[] = [
  { label: 'Instagram', Icon: InstagramIcon },
  { label: 'Twitter', Icon: TwitterIcon },
  { label: 'Website', Icon: Globe },
];

export const Footer = () => {
  return (
    <footer className="relative overflow-hidden border-t border-foreground/10 bg-background px-6 pt-20 pb-12 md:pt-28">
      <div aria-hidden className="glow-top absolute inset-0" />

      <div className="relative mx-auto max-w-6xl">
        <div className="flex flex-col justify-between gap-12 md:flex-row">
          <div className="max-w-sm">
            <a href="#" aria-label="Asme home" className="flex items-center gap-2.5">
              <Globe size={24} className="text-foreground" />
              <span className="text-lg font-semibold text-foreground">Asme</span>
            </a>
            <p className="mt-5 text-sm leading-relaxed text-foreground/50">
              Know it <Serif className="text-foreground/70">all</Serif>. The latest news and insights, delivered to your
              inbox.
            </p>
            <div className="mt-7 flex gap-3">
              {SOCIAL_LINKS.map(({ label, Icon }) => (
                <a
                  key={label}
                  href="#"
                  aria-label={label}
                  className="liquid-glass rounded-full p-3 text-foreground/80 transition-all hover:bg-foreground/5 hover:text-foreground"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-10 sm:grid-cols-3 md:gap-16">
            {FOOTER_COLUMNS.map((column) => (
              <div key={column.heading}>
                <p className="mb-4 text-xs tracking-widest text-foreground/40 uppercase">{column.heading}</p>
                <ul className="space-y-3">
                  {column.links.map((link) => (
                    <li key={link}>
                      <a href="#" className="text-sm text-foreground/70 transition-colors hover:text-foreground">
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <p
          aria-hidden
          className="mt-16 text-center [font-family:var(--font-asme-serif)] text-[20vw] leading-none tracking-tight text-foreground/5 select-none md:mt-20 md:text-[15vw]"
        >
          Asme
        </p>

        <div className="mt-8 flex flex-col items-center justify-between gap-4 border-t border-foreground/10 pt-8 sm:flex-row">
          <p className="text-xs text-foreground/40">&copy; 2026 Asme. All rights reserved.</p>
          <div className="flex items-center gap-6">
            <a href="#" className="text-xs text-foreground/40 transition-colors hover:text-foreground">
              Privacy
            </a>
            <a href="#" className="text-xs text-foreground/40 transition-colors hover:text-foreground">
              Terms
            </a>
            <a href="#" className="text-xs text-foreground/40 transition-colors hover:text-foreground">
              Cookies
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};
```

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

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

'use client';

import * as React from 'react';
import type { MotionProps } from 'motion/react';

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

interface RevealOptions {
  x?: number;
  y?: number;
  duration?: number;
  delay?: number;
}

export const reveal = ({ x = 0, y = 0, duration = 0.6, delay = 0 }: RevealOptions = {}): MotionProps => {
  return {
    initial: { opacity: 0, x, y },
    whileInView: { opacity: 1, x: 0, y: 0 },
    viewport: { once: true, margin: '-100px' },
    transition: { duration, delay, ease: 'easeOut' },
  };
};

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

export const Serif = ({ children, className }: SerifProps) => {
  return <span className={cn('[font-family:var(--font-asme-serif)] font-normal italic', className)}>{children}</span>;
};

interface IconProps {
  className?: string;
}

export const InstagramIcon = ({ className }: IconProps) => {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.6}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden
    >
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17" cy="7" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
};

export const TwitterIcon = ({ className }: IconProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
      <path d="M22 5.92c-.74.33-1.53.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.79.47-1.67.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.46-4.29 4.1 4.1 0 0 0 1.27 5.48c-.65-.02-1.27-.2-1.81-.5v.05a4.1 4.1 0 0 0 3.29 4.02c-.6.16-1.23.18-1.84.07a4.11 4.11 0 0 0 3.83 2.85A8.23 8.23 0 0 1 2 18.4a11.62 11.62 0 0 0 6.29 1.84c7.55 0 11.68-6.25 11.68-11.67l-.01-.53A8.3 8.3 0 0 0 22 5.92Z" />
    </svg>
  );
};
```

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

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

const ASME_CSS = `
.asme {
  --background: hsl(0 0% 0%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(0 0% 5%);
  --card-foreground: hsl(0 0% 100%);
  --primary: hsl(0 0% 100%);
  --primary-foreground: hsl(0 0% 0%);
  --secondary: hsl(0 0% 12%);
  --secondary-foreground: hsl(0 0% 85%);
  --muted: hsl(0 0% 15%);
  --muted-foreground: hsl(0 0% 65%);
  --accent: hsl(0 0% 12%);
  --accent-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 20%);
  --input: hsl(0 0% 18%);
  --ring: hsl(0 0% 40%);
}
.asme ::selection {
  background: rgba(255, 255, 255, 0.25);
  color: #000;
}
.asme .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;
}
.asme .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;
}
.asme .glow-top {
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}
.asme .glow-center {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}
`;

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

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

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

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

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

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