# Mindloop

> Dark, monochrome newsletter landing page: a full-screen video hero with an inline subscribe form, an answer-engine section, scroll-revealed mission copy, a four-up feature grid and a streaming-video call to action. Framer Motion throughout, with a self-contained pure-black palette and liquid-glass accents.

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

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

## Install

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

## Files

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

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

'use client';

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

import { Cta } from './cta';
import { Footer } from './footer';
import { inter, instrumentSerif } from './fonts';
import { Hero } from './hero';
import { Mission } from './mission';
import { Navbar } from './navbar';
import { Search } from './search';
import { Solution } from './solution';
import { MindloopStyles } from './styles';

const Mindloop = () => {
  return (
    <div
      className={cn(
        'mindloop',
        inter.variable,
        instrumentSerif.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
        '[font-family:var(--font-mindloop-sans),ui-sans-serif,sans-serif]',
      )}
    >
      <MindloopStyles />
      <Navbar />
      <Hero />
      <Search />
      <Mission />
      <Solution />
      <Cta />
      <Footer />
    </div>
  );
};

export default Mindloop;
```

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

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

'use client';

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

const NAV_LINKS = [
  { label: 'Home', href: '#home' },
  { label: 'How It Works', href: '#how-it-works' },
  { label: 'Philosophy', href: '#philosophy' },
  { label: 'Use Cases', href: '#use-cases' },
];

const SOCIAL_LINKS = [
  { label: 'Instagram', Icon: InstagramIcon },
  { label: 'LinkedIn', Icon: LinkedinIcon },
  { label: 'Twitter', Icon: TwitterIcon },
];

export const Navbar = () => {
  return (
    <header className="fixed inset-x-0 top-0 z-50 px-8 py-4 md:px-28">
      <nav className="flex items-center justify-between gap-6">
        <div className="flex items-center gap-3">
          <a href="#home" className="flex items-center gap-2">
            <Logo />
            <span className="text-lg font-bold tracking-tight">Mindloop</span>
          </a>

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

        <div className="flex items-center gap-2">
          {SOCIAL_LINKS.map(({ label, Icon }) => (
            <a
              key={label}
              href="#"
              aria-label={label}
              className="liquid-glass inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground"
            >
              <Icon className="size-4" />
            </a>
          ))}
        </div>
      </nav>
    </header>
  );
};
```

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

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

'use client';

import { motion } from 'motion/react';

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

import { AvatarRow, Serif, useFadeUp } from './primitives';

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

export const Hero = () => {
  const fade = useFadeUp();

  return (
    <section id="home" className="relative flex h-dvh w-full flex-col items-center justify-center overflow-hidden">
      <video
        className="absolute inset-0 h-full w-full object-cover"
        src={HERO_VIDEO}
        autoPlay
        loop
        muted
        playsInline
        aria-hidden
      />
      <div aria-hidden className="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-t from-background to-transparent" />

      <div className="relative z-10 mx-auto flex w-full max-w-3xl flex-col items-center px-6 pt-28 text-center md:pt-32">
        <motion.div {...fade(0)} className="flex flex-col items-center gap-3 sm:flex-row">
          <AvatarRow />
          <span className="text-sm text-muted-foreground">7,000+ people already subscribed</span>
        </motion.div>

        <motion.h1
          {...fade(0.1, { fade: false })}
          className="mt-6 w-full text-5xl font-medium tracking-[-2px] md:text-7xl lg:text-8xl"
        >
          Get <Serif>Inspired</Serif> with Us
        </motion.h1>

        <motion.p
          {...fade(0.2, { fade: false })}
          className="mt-6 w-full max-w-xl text-lg"
          style={{ color: 'hsl(var(--hero-subtitle))' }}
        >
          Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction.
        </motion.p>

        <motion.form
          {...fade(0.3)}
          onSubmit={(e) => e.preventDefault()}
          className="liquid-glass mt-10 w-full max-w-lg rounded-full p-2"
        >
          <Field orientation="horizontal" className="gap-2">
            <FieldLabel htmlFor="mindloop-hero-email" className="sr-only">
              Email address
            </FieldLabel>
            <input
              id="mindloop-hero-email"
              type="email"
              required
              autoComplete="email"
              placeholder="Enter your email"
              className="min-w-0 flex-1 bg-transparent px-5 text-sm text-foreground outline-none placeholder:text-muted-foreground"
            />
            <Button asChild size="lg">
              <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
                SUBSCRIBE
              </motion.button>
            </Button>
          </Field>
        </motion.form>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/mindloop/search.tsx`

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

'use client';

import { motion } from 'motion/react';

import { ChatGptIcon, GoogleAiIcon, PerplexityIcon, Serif, useFadeUp } from './primitives';

const PLATFORMS = [
  {
    name: 'ChatGPT',
    Icon: ChatGptIcon,
    description:
      "Millions ask it before they ask anyone else. If your answer isn't in the model, you're not in the conversation.",
  },
  {
    name: 'Perplexity',
    Icon: PerplexityIcon,
    description: 'It cites its sources out loud. Be one of them, or watch a competitor get the citation instead.',
  },
  {
    name: 'Google AI',
    Icon: GoogleAiIcon,
    description: 'The answer now sits above the links. The page that earns the summary earns the reader.',
  },
];

export const Search = () => {
  const fade = useFadeUp();

  return (
    <section id="use-cases" className="px-8 pt-52 pb-6 md:px-28 md:pt-64 md:pb-9">
      <div className="mx-auto max-w-5xl text-center">
        <motion.h2 {...fade(0)} className="text-5xl tracking-[-2px] md:text-7xl lg:text-8xl">
          Search has <Serif>changed.</Serif> Have you?
        </motion.h2>

        <motion.p {...fade(0.1)} className="mx-auto mt-8 mb-24 max-w-2xl text-lg text-muted-foreground">
          People used to type keywords and scroll. Now they ask a question and read one answer. Make sure it sounds like
          you.
        </motion.p>

        <div className="mb-20 grid gap-12 md:grid-cols-3 md:gap-8">
          {PLATFORMS.map((platform, i) => (
            <motion.div key={platform.name} {...fade(0.1 * i)} className="flex flex-col items-center">
              <div className="liquid-glass flex aspect-square w-full max-w-[200px] items-center justify-center rounded-[2rem]">
                <platform.Icon className="h-24 w-24 text-foreground" />
              </div>
              <h3 className="mt-8 text-base font-semibold">{platform.name}</h3>
              <p className="mt-2 max-w-xs text-sm text-muted-foreground">{platform.description}</p>
            </motion.div>
          ))}
        </div>

        <motion.p {...fade(0)} className="text-center text-sm text-muted-foreground">
          If you don&apos;t answer the questions, someone else will.
        </motion.p>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/mindloop/mission.tsx`

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

'use client';

import * as React from 'react';
import { motion, useReducedMotion, useScroll, useTransform, type MotionValue } from 'motion/react';

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

const MISSION_VIDEO = 'https://hirael.com/media/templates/mindloop/mission.mp4';

const PARAGRAPH_1 =
  "We're building a space where curiosity meets clarity, where readers find depth, writers find reach, and every newsletter becomes a conversation worth having.";
const PARAGRAPH_1_HIGHLIGHTS = ['curiosity', 'meets', 'clarity'];

const PARAGRAPH_2 =
  'A platform where content, community, and insight flow together, with less noise, less friction, and more meaning for everyone involved.';

interface Token {
  text: string;
  highlight: boolean;
}

const tokenize = (text: string, highlights: string[]): Token[] => {
  return text.split(' ').map((word) => ({
    text: word,
    highlight: highlights.includes(word.replace(/[^a-zA-Z]/g, '')),
  }));
};

interface WordProps {
  token: Token;
  index: number;
  total: number;
  progress: MotionValue<number>;
  reduce: boolean;
}

const Word = ({ token, index, total, progress, reduce }: WordProps) => {
  const start = index / total;
  const end = (index + 0.9) / total;
  const opacity = useTransform(progress, [start, end], [0.15, 1]);

  return (
    <motion.span className={cn(token.highlight && 'text-foreground')} style={reduce ? undefined : { opacity }}>
      {token.text}{' '}
    </motion.span>
  );
};

export const Mission = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion() ?? false;
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start 0.85', 'end 0.4'],
  });

  const tokens1 = tokenize(PARAGRAPH_1, PARAGRAPH_1_HIGHLIGHTS);
  const tokens2 = tokenize(PARAGRAPH_2, []);
  const total = tokens1.length + tokens2.length;

  return (
    <section id="philosophy" className="px-8 pt-0 pb-32 md:px-28 md:pb-44">
      <div className="mx-auto flex max-w-4xl flex-col items-center">
        <video
          className="w-full max-w-[800px] rounded-2xl object-cover"
          src={MISSION_VIDEO}
          autoPlay
          loop
          muted
          playsInline
          aria-hidden
        />

        <div ref={ref} className="mt-16 w-full text-center md:mt-20">
          <p className="text-2xl font-medium tracking-[-1px] text-[hsl(var(--hero-subtitle))] md:text-4xl lg:text-5xl">
            {tokens1.map((token, i) => (
              <Word key={i} token={token} index={i} total={total} progress={scrollYProgress} reduce={reduce} />
            ))}
          </p>
          <p className="mt-10 text-xl font-medium text-[hsl(var(--hero-subtitle))] md:text-2xl lg:text-3xl">
            {tokens2.map((token, i) => (
              <Word
                key={i}
                token={token}
                index={tokens1.length + i}
                total={total}
                progress={scrollYProgress}
                reduce={reduce}
              />
            ))}
          </p>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/mindloop/solution.tsx`

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

'use client';

import { motion } from 'motion/react';

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

const SOLUTION_VIDEO = 'https://hirael.com/media/templates/mindloop/solution.mp4';

const FEATURES = [
  {
    title: 'Curated Feed',
    description: 'A reading feed tuned to what you care about, not what shouts loudest.',
  },
  {
    title: 'Writer Tools',
    description: 'Draft, schedule and publish in one place, with the formatting out of your way.',
  },
  {
    title: 'Community',
    description: 'Comments, replies and shared threads that turn readers into regulars.',
  },
  {
    title: 'Distribution',
    description: 'Reach inboxes, the web and answer engines from a single publish.',
  },
];

export const Solution = () => {
  const fade = useFadeUp();

  return (
    <section id="how-it-works" className="border-t border-border/30 px-8 py-32 md:px-28 md:py-44">
      <div className="mx-auto max-w-6xl">
        <motion.p {...fade(0)} className="text-xs tracking-[3px] text-muted-foreground uppercase">
          SOLUTION
        </motion.p>

        <motion.h2 {...fade(0.1)} className="mt-6 max-w-3xl text-4xl tracking-[-1px] md:text-6xl">
          The platform for <Serif>meaningful</Serif> content
        </motion.h2>

        <motion.div {...fade(0.2)} className="mt-12">
          <video
            className="aspect-[3/1] w-full rounded-2xl object-cover"
            src={SOLUTION_VIDEO}
            autoPlay
            loop
            muted
            playsInline
            aria-hidden
          />
        </motion.div>

        <div className="mt-16 grid gap-8 md:grid-cols-4">
          {FEATURES.map((feature, i) => (
            <motion.div key={feature.title} {...fade(0.1 * i)}>
              <h3 className="text-base font-semibold">{feature.title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};
```

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

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

'use client';

import { motion } from 'motion/react';

import { Logo, Serif, useFadeUp } from './primitives';

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

export const Cta = () => {
  const fade = useFadeUp();

  return (
    <section className="relative overflow-hidden border-t border-border/30 px-8 py-32 md:px-28 md:py-44">
      <video
        src={CTA_VIDEO}
        autoPlay
        loop
        muted
        playsInline
        aria-hidden
        className="absolute inset-0 z-0 h-full w-full object-cover"
      />
      <div aria-hidden className="absolute inset-0 z-[1] bg-background/45" />

      <motion.div {...fade(0)} className="relative z-10 mx-auto flex max-w-2xl flex-col items-center text-center">
        <Logo size="lg" />

        <h2 className="mt-8 w-full text-4xl tracking-[-1px] md:text-6xl">
          Start Your <Serif>Journey</Serif>
        </h2>

        <p className="mt-6 w-full max-w-lg text-lg text-muted-foreground">
          Read what matters, write what lasts, and find the people who care about the same things you do.
        </p>

        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
          <motion.a
            href="#"
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.98 }}
            className="rounded-lg bg-foreground px-8 py-3.5 text-sm font-semibold text-background"
          >
            Subscribe Now
          </motion.a>
          <motion.a
            href="#"
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.98 }}
            className="liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold text-foreground"
          >
            Start Writing
          </motion.a>
        </div>
      </motion.div>
    </section>
  );
};
```

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

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

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

export const Footer = () => {
  return (
    <footer className="border-t border-border/30 px-8 py-12 md:px-28">
      <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
        <p className="text-sm text-muted-foreground">&copy; 2026 Mindloop. All rights reserved.</p>
        <nav className="flex items-center gap-6">
          {FOOTER_LINKS.map((link) => (
            <a key={link} href="#" className="text-sm text-muted-foreground transition-colors hover:text-foreground">
              {link}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
};
```

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

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

'use client';

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

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

const FADE_EASE: Transition['ease'] = 'easeOut';

export const useFadeUp = () => {
  const reduce = useReducedMotion();

  // `fade: false` keeps a headline at full opacity so it counts as painted for Largest Contentful Paint.
  return (delay = 0, { fade = true } = {}): MotionProps => ({
    initial: reduce ? { opacity: 1, y: 0 } : { opacity: fade ? 0 : 1, y: 20 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, margin: '-100px' },
    transition: reduce ? { duration: 0 } : { duration: 0.6, delay, ease: FADE_EASE },
  });
};

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

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

type LogoSize = 'sm' | 'lg';

interface LogoProps {
  size?: LogoSize;
}

export const Logo = ({ size = 'sm' }: LogoProps) => {
  return (
    <span
      aria-hidden
      className={cn(
        'relative inline-flex shrink-0 items-center justify-center rounded-full border-2 border-foreground/60',
        size === 'lg' ? 'size-10' : 'size-7',
      )}
    >
      <span className={cn('rounded-full border border-foreground/60', size === 'lg' ? 'size-5' : 'size-3')} />
    </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 LinkedinIcon = ({ className }: IconProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
      <path d="M6.94 5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0ZM3.25 8.5h3.4V21h-3.4V8.5Zm5.6 0h3.26v1.71h.05c.45-.86 1.56-1.77 3.21-1.77 3.43 0 4.07 2.26 4.07 5.2V21h-3.4v-5.45c0-1.3-.02-2.97-1.81-2.97-1.81 0-2.09 1.42-2.09 2.88V21h-3.39V8.5Z" />
    </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>
  );
};

export const ChatGptIcon = ({ className }: IconProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.1} className={className} aria-hidden>
      <ellipse cx="12" cy="12" rx="4.4" ry="9.4" />
      <ellipse cx="12" cy="12" rx="4.4" ry="9.4" transform="rotate(60 12 12)" />
      <ellipse cx="12" cy="12" rx="4.4" ry="9.4" transform="rotate(120 12 12)" />
    </svg>
  );
};

export const PerplexityIcon = ({ className }: IconProps) => {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.1}
      strokeLinejoin="round"
      className={className}
      aria-hidden
    >
      <rect x="5" y="5" width="14" height="14" rx="2.5" />
      <rect x="5" y="5" width="14" height="14" rx="2.5" transform="rotate(45 12 12)" />
      <path d="M12 3.5v17" />
    </svg>
  );
};

export const GoogleAiIcon = ({ className }: IconProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
      <path d="M12 2c.4 5.3 2.7 7.6 8 8-5.3.4-7.6 2.7-8 8-.4-5.3-2.7-7.6-8-8 5.3-.4 7.6-2.7 8-8Z" />
    </svg>
  );
};

const AVATAR_TONES = [
  { from: '#dcdcdc', to: '#8f8f8f' },
  { from: '#bfbfbf', to: '#6f6f6f' },
  { from: '#a6a6a6', to: '#545454' },
];

interface AvatarProps {
  tone?: number;
  className?: string;
}

export const Avatar = ({ tone = 0, className }: AvatarProps) => {
  const t = AVATAR_TONES[tone % AVATAR_TONES.length];
  const id = `mindloop-avatar-${tone}`;

  return (
    <span className={cn('inline-flex size-8 overflow-hidden rounded-full border-2 border-background', className)}>
      <svg viewBox="0 0 32 32" className="h-full w-full" aria-hidden>
        <defs>
          <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={t.from} />
            <stop offset="100%" stopColor={t.to} />
          </linearGradient>
        </defs>
        <rect width="32" height="32" fill={`url(#${id})`} />
        <circle cx="16" cy="13" r="5" fill="var(--background)" opacity="0.28" />
        <path d="M6 30c0-5.5 4.5-9 10-9s10 3.5 10 9Z" fill="var(--background)" opacity="0.28" />
      </svg>
    </span>
  );
};

interface AvatarRowProps {
  className?: string;
}

export const AvatarRow = ({ className }: AvatarRowProps) => {
  return (
    <div className={cn('flex -space-x-2', className)}>
      <Avatar tone={0} />
      <Avatar tone={1} />
      <Avatar tone={2} />
    </div>
  );
};
```

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

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

const MINDLOOP_CSS = `
.mindloop {
  --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(170 15% 45%);
  --accent-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 20%);
  --input: hsl(0 0% 18%);
  --ring: hsl(0 0% 40%);
  --hero-subtitle: 210 17% 95%;
}
.mindloop .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;
}
.mindloop .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;
}
`;

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

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

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

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

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

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