hirael
blockagency-landingsource: ok · hit
Agency Landing
Bright, shader-lit agency landing page: a full-viewport hero with an animated WebGL backdrop and pill navigation, an editorial about section, a featured-work grid of autoplaying video cards, and a dark closing footer with a call to action. Built on the shaders package, with a self-contained light palette.
npx shadcn add "https://hirael.com/r/agency-landing.json"free
Where it goes
herofooterfeature-grid
Visual style
dark-futuristic
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lighticonslucide-react
Files7 · source cached 10/15/2026, 7:25:49 AM
registry/hirael/bases/radix/templates/agency-landing/agency-landing.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
import { About } from './about';
import { CaseStudies } from './case-studies';
import { Footer } from './footer';
import { Hero } from './hero';
const AgencyLanding = () => {
return (
<div className="bg-background [font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,'Helvetica_Neue',Arial,'Noto_Sans',sans-serif,'Apple_Color_Emoji','Segoe_UI_Emoji','Segoe_UI_Symbol','Noto_Color_Emoji'] text-foreground antialiased">
<Hero />
<About />
<CaseStudies />
<Footer />
</div>
);
};
export default AgencyLanding;
registry/hirael/bases/radix/templates/agency-landing/hero.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { ArrowRight, Menu, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { EASE, HiraelMark, OrangeButton, PartnerIcon, PILL_BUTTON, RollText } from './primitives';
const ShaderBackground = dynamic(() => import('./shader-background').then((m) => m.ShaderBackground), { ssr: false });
const NAV_LINKS = ['Projects', 'Studio', 'Journal', 'Connect'];
export const Hero = () => {
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => {
document.body.style.overflow = '';
};
}, [menuOpen]);
return (
<>
<section className="relative flex h-dvh flex-col overflow-hidden bg-[#EFEFEF]">
<div className="pointer-events-none absolute inset-0 z-10">
<ShaderBackground />
</div>
<header className="relative z-20 mx-auto w-full max-w-[1440px] p-2 sm:p-3">
<nav className="flex items-center justify-between rounded-full bg-white p-[5px]">
<div className="flex items-center gap-6">
<a href="#" aria-label="Hirael home" className="flex items-center gap-2">
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-black text-white sm:h-10 sm:w-10">
<HiraelMark className="h-5 w-4 sm:h-6 sm:w-5" />
</span>
<span className="text-[15px] font-semibold tracking-tight text-black sm:text-[16px]">Hirael</span>
</a>
<div className="hidden items-center gap-6 md:flex">
{NAV_LINKS.map((link) => (
<a
key={link}
href="#"
className="text-[14px] text-black transition-colors duration-300 hover:text-black/50"
>
{link}
</a>
))}
</div>
</div>
<div className="hidden items-center gap-4 md:flex">
<span className="hidden text-[13px] text-black/60 lg:block">Taking on projects for Q1 2026</span>
<button
type="button"
className={cn(PILL_BUTTON, 'group h-auto bg-black py-2 ps-5 pe-2 text-[13px] text-white')}
>
<RollText>Book a strategy call</RollText>
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white">
<ArrowRight
className={cn('size-3.5 text-black transition-transform duration-500 group-hover:-rotate-45', EASE)}
/>
</span>
</button>
</div>
<button
type="button"
onClick={() => setMenuOpen((open) => !open)}
aria-label={menuOpen ? 'Close menu' : 'Open menu'}
className={cn(PILL_BUTTON, 'size-10 bg-black text-white md:hidden')}
>
{menuOpen ? <X className="size-[18px]" /> : <Menu className="size-[18px]" />}
</button>
</nav>
</header>
<div className="relative z-20 flex flex-1 flex-col justify-end">
<div className="mx-auto w-full max-w-[1440px] px-5 pb-14 sm:px-8 sm:pb-16 lg:px-12 lg:pb-20">
<span className="mb-5 block text-[13px] tracking-wide text-black sm:mb-8 sm:text-[14px]">
Hirael Studio
</span>
<h1 className="text-[clamp(1.75rem,7vw,4.2rem)] leading-[1.08] font-medium tracking-[-0.03em] text-black sm:text-[clamp(2.5rem,5vw,4.2rem)]">
We craft digital experiences
<br className="hidden sm:block" />
<span className="sm:hidden"> </span>
for brands ready to dominate
<br className="hidden sm:block" />
<span className="sm:hidden"> </span>
their category online.
</h1>
<div className="mt-8 flex flex-col items-start gap-4 sm:mt-12 sm:flex-row sm:items-center sm:gap-5">
<OrangeButton label="Start a project" />
<div className="flex items-center gap-2 rounded-[4px] bg-white px-2.5 py-2 shadow-[0_2px_8px_rgba(0,0,0,0.08)] transition-shadow hover:shadow-[0_4px_16px_rgba(0,0,0,0.12)]">
<PartnerIcon className="h-5 w-5 fill-current text-primary sm:h-6 sm:w-6" />
<span className="text-[13px] font-medium text-black sm:text-[14px]">Certified Partner</span>
<span className="inline-flex items-center rounded bg-black px-1.5 py-0.5 text-[10px] font-normal whitespace-nowrap text-white sm:px-2 sm:text-[11px]">
Featured
</span>
</div>
</div>
</div>
</div>
</section>
<div
className={cn(
'fixed inset-0 z-50 transition-opacity duration-500 md:hidden',
menuOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
)}
>
<div className="absolute inset-0 bg-black/60" onClick={() => setMenuOpen(false)} />
<div
className={cn(
'absolute inset-x-0 bottom-0 mx-3 mb-3 rounded-2xl bg-white p-6 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]',
menuOpen ? 'translate-y-0' : 'translate-y-full',
)}
>
<div className="flex flex-col gap-2">
{NAV_LINKS.map((link) => (
<a
key={link}
href="#"
onClick={() => setMenuOpen(false)}
className="text-[28px] leading-[32px] font-medium text-black"
>
{link}
</a>
))}
</div>
<OrangeButton label="Start a project" className="mt-6 w-full justify-between" />
</div>
</div>
</>
);
};
registry/hirael/bases/radix/templates/agency-landing/about.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
import { cn } from '@/lib/utils';
import { OrangeButton, PILL_LABEL } from './primitives';
const SMALL_IMAGE = 'https://hirael.com/media/templates/agency-landing/about-small.jpg';
const LARGE_IMAGE = 'https://hirael.com/media/templates/agency-landing/about-large.jpg';
const PARAGRAPH =
'Through research, creative thinking and iteration we help growing brands realize their digital full potential.';
export const About = () => {
return (
<section className="overflow-hidden bg-background pt-16 pb-12 sm:pt-20 sm:pb-16 lg:pt-32 lg:pb-24">
<div className="mx-auto w-full max-w-[1440px]">
<div className="mb-6 flex items-center gap-3 px-5 sm:mb-8 sm:px-8 lg:px-12">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-foreground text-[11px] font-semibold text-background sm:h-7 sm:w-7 sm:text-[12px]">
1
</span>
<span
className={cn(
PILL_LABEL,
'border-border px-3 py-1 text-[12px] text-foreground sm:px-4 sm:py-1.5 sm:text-[13px]',
)}
>
Introducing Hirael
</span>
</div>
<h2 className="mb-12 px-5 text-[clamp(1.5rem,4vw,3.2rem)] leading-[1.12] font-medium tracking-[-0.02em] text-foreground sm:mb-16 sm:px-8 lg:mb-28 lg:px-12">
Strategy-led creatives, delivering
<br />
results in digital and beyond.
</h2>
<div className="px-5 sm:px-8 lg:px-12">
<div className="lg:hidden">
<p className="text-[15px] leading-[1.6] font-medium text-foreground sm:text-[17px]">{PARAGRAPH}</p>
<OrangeButton label="About our studio" className="mt-6" />
<div className="mt-8 flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:gap-5">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={SMALL_IMAGE}
alt=""
className="aspect-[438/346] w-full rounded-[0.75rem] object-cover sm:w-[45%] sm:rounded-2xl"
/>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={LARGE_IMAGE}
alt=""
className="aspect-[3/2] w-full rounded-[0.75rem] object-cover sm:w-[55%] sm:rounded-2xl"
/>
</div>
</div>
<div className="hidden lg:grid lg:grid-cols-[24%_minmax(0,1fr)_44%] lg:items-end lg:gap-6 xl:gap-8">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={SMALL_IMAGE} alt="" className="aspect-[438/346] w-full rounded-2xl object-cover" />
<div className="pb-1">
<p className="text-[16px] leading-[1.65] font-medium text-foreground xl:text-[18px]">{PARAGRAPH}</p>
<OrangeButton label="About our studio" className="mt-6" />
</div>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={LARGE_IMAGE} alt="" className="aspect-[3/2] w-full rounded-2xl object-cover" />
</div>
</div>
</div>
</section>
);
};
registry/hirael/bases/radix/templates/agency-landing/case-studies.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
import { ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import { LinkIcon, PILL_LABEL } from './primitives';
const NARRATIV_VIDEO = 'https://hirael.com/media/templates/agency-landing/case-study-narrativ.mp4';
const LUMINAR_VIDEO = 'https://hirael.com/media/templates/agency-landing/case-study-luminar.mp4';
export const CaseStudies = () => {
return (
<section className="bg-muted pt-16 pb-16 sm:pt-20 sm:pb-20 lg:pt-28 lg:pb-28">
<div className="mx-auto w-full max-w-[1440px]">
<div className="mb-6 flex items-center gap-3 px-5 sm:mb-8 sm:px-8 lg:px-12">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-foreground text-[11px] font-semibold text-background sm:h-7 sm:w-7 sm:text-[12px]">
2
</span>
<span
className={cn(
PILL_LABEL,
'border-border px-3 py-1 text-[12px] text-foreground sm:px-4 sm:py-1.5 sm:text-[13px]',
)}
>
Featured client work
</span>
</div>
<h2 className="mb-10 px-5 text-[clamp(1.75rem,7vw,4.2rem)] leading-[1.08] font-medium tracking-[-0.03em] text-foreground sm:mb-14 sm:px-8 sm:text-[clamp(2.5rem,5vw,4.2rem)] lg:mb-16 lg:px-12">
Our projects
</h2>
<div className="grid grid-cols-1 gap-5 px-5 sm:gap-6 sm:px-8 md:grid-cols-2 lg:gap-7 lg:px-12">
<div>
<div className="group relative aspect-[4/3] cursor-pointer overflow-hidden rounded-2xl bg-[#1a1d2e]">
<video src={NARRATIV_VIDEO} autoPlay muted loop playsInline className="h-full w-full object-cover" />
<div className="absolute start-4 bottom-4">
<div className="flex h-9 w-9 items-center overflow-hidden rounded-full bg-background transition-all duration-300 ease-in-out group-hover:w-[148px]">
<span className="flex h-9 w-9 flex-shrink-0 items-center justify-center">
<LinkIcon className="h-[14px] w-[14px] -rotate-45 text-foreground transition-transform duration-300 group-hover:rotate-0" />
</span>
<span className="text-[13px] font-medium whitespace-nowrap text-foreground opacity-0 transition-opacity delay-100 duration-300 group-hover:opacity-100">
Learn more
</span>
</div>
</div>
</div>
<p className="mt-4 text-[13px] leading-relaxed text-muted-foreground sm:text-[14px]">
Winner of Site of the Month 2025 - an interactive 3D showcase driving record engagement
</p>
<h3 className="mt-1 text-[14px] font-semibold text-foreground sm:text-[15px]">Narrativ</h3>
</div>
<div>
<div className="group relative aspect-[4/3] cursor-pointer overflow-hidden rounded-2xl bg-[#6b6b6b]">
<video src={LUMINAR_VIDEO} autoPlay muted loop playsInline className="h-full w-full object-cover" />
<div className="absolute start-4 bottom-4">
<div className="flex h-9 w-9 items-center overflow-hidden rounded-full bg-foreground transition-all duration-300 ease-in-out group-hover:w-[168px]">
<span className="flex h-9 w-9 flex-shrink-0 items-center justify-center">
<ArrowRight
size={14}
className="-rotate-45 text-background transition-transform duration-300 group-hover:rotate-0"
/>
</span>
<span className="text-[13px] font-medium whitespace-nowrap text-background opacity-0 transition-opacity delay-100 duration-300 group-hover:opacity-100">
View case study
</span>
</div>
</div>
</div>
<p className="mt-4 text-[13px] leading-relaxed text-muted-foreground sm:text-[14px]">
Transforming a dated platform into a conversion-focused brand experience
</p>
<h3 className="mt-1 text-[14px] font-semibold text-foreground sm:text-[15px]">Luminar</h3>
</div>
</div>
</div>
</section>
);
};
registry/hirael/bases/radix/templates/agency-landing/footer.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
import { ArrowUpRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import { EASE, HiraelMark, OrangeButton, PILL_LABEL } from './primitives';
const LINK_COLUMNS = [
{
heading: 'Studio',
links: ['About', 'Team', 'Careers', 'Journal'],
},
{
heading: 'Work',
links: ['Projects', 'Case studies', 'Services', 'Process'],
},
{
heading: 'Connect',
links: ['Start a project', 'Book a call', 'X', 'LinkedIn'],
},
];
export const Footer = () => {
return (
<footer className="bg-foreground text-background">
<div className="mx-auto w-full max-w-[1440px] px-5 py-16 sm:px-8 sm:py-20 lg:px-12 lg:py-24">
<div className="flex flex-col gap-8 border-b border-background/10 pb-12 sm:pb-16 lg:flex-row lg:items-end lg:justify-between lg:pb-20">
<div className="max-w-2xl">
<div className="mb-5 flex items-center gap-3 sm:mb-8">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-background text-foreground sm:h-7 sm:w-7">
<HiraelMark className="h-3.5 w-3 sm:h-4 sm:w-3.5" />
</span>
<span
className={cn(
PILL_LABEL,
'border-background/15 px-3 py-1 text-[12px] text-background sm:px-4 sm:py-1.5 sm:text-[13px]',
)}
>
Work with us
</span>
</div>
<h2 className="text-[clamp(1.75rem,7vw,4.2rem)] leading-[1.08] font-medium tracking-[-0.03em] sm:text-[clamp(2.5rem,5vw,4.2rem)]">
Ready to dominate
<br className="hidden sm:block" />
your category?
</h2>
</div>
<div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center lg:flex-col lg:items-end">
<OrangeButton label="Start a project" />
<a
href="mailto:hello@hirael.com"
className="text-[14px] text-background/60 transition-colors duration-300 hover:text-background"
>
hello@hirael.com
</a>
</div>
</div>
<div className="grid grid-cols-2 gap-x-6 gap-y-10 py-12 sm:py-16 lg:grid-cols-[1.5fr_1fr_1fr_1fr] lg:py-20">
<div className="col-span-2 flex flex-col gap-5 lg:col-span-1">
<a href="#" aria-label="Hirael home" className="flex items-center gap-2">
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-background text-foreground sm:h-10 sm:w-10">
<HiraelMark className="h-5 w-4 sm:h-6 sm:w-5" />
</span>
<span className="text-[15px] font-semibold tracking-tight sm:text-[16px]">Hirael</span>
</a>
<p className="max-w-xs text-[14px] leading-[1.6] text-background/60">
A strategy-led studio crafting digital experiences for growing brands.
</p>
<span
className={cn(
PILL_LABEL,
'gap-2 border-background/15 px-3 py-1.5 text-[13px] font-normal text-background/75',
)}
>
<span className="flex h-2 w-2 rounded-full bg-primary" />
Taking on projects for Q1 2026
</span>
</div>
{LINK_COLUMNS.map((col) => (
<nav key={col.heading} className="flex flex-col gap-3.5">
<h3 className="text-[11px] font-semibold tracking-[0.16em] text-background/50 uppercase">
{col.heading}
</h3>
<ul className="flex flex-col gap-2.5">
{col.links.map((link) => (
<li key={link}>
<a
href="#"
className="group inline-flex items-center gap-1 text-[14px] text-background/60 transition-colors duration-300 hover:text-background"
>
{link}
<ArrowUpRight
size={13}
className={cn(
'opacity-0 transition-opacity duration-300 group-hover:opacity-100 rtl:-scale-x-100',
EASE,
)}
/>
</a>
</li>
))}
</ul>
</nav>
))}
</div>
<div
aria-hidden
className="pointer-events-none overflow-hidden border-t border-background/10 pt-10 select-none sm:pt-12"
>
<span className="block text-[18vw] leading-[0.8] font-medium tracking-[-0.05em] text-background/[0.06]">
Hirael
</span>
</div>
<div className="flex flex-col gap-4 pt-8 sm:flex-row sm:items-center sm:justify-between">
<p className="text-[13px] text-background/50">© 2026 Hirael Studio. All rights reserved.</p>
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
<a href="#" className="text-[13px] text-background/50 transition-colors duration-300 hover:text-background">
Privacy
</a>
<a href="#" className="text-[13px] text-background/50 transition-colors duration-300 hover:text-background">
Terms
</a>
</div>
</div>
</div>
</footer>
);
};
registry/hirael/bases/radix/templates/agency-landing/primitives.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
import { type ComponentProps, type ReactNode } from 'react';
import { ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';
export const EASE = 'ease-[cubic-bezier(0.25,0.1,0.25,1)]';
/** Plain button base: the template keeps its fixed palette instead of the theme's Button. */
export const PILL_BUTTON =
'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50';
/** Plain label pill, same reason as PILL_BUTTON. */
export const PILL_LABEL = 'inline-flex w-fit shrink-0 items-center rounded-full border font-medium whitespace-nowrap';
interface HiraelMarkProps {
className?: string;
}
export const HiraelMark = ({ className }: HiraelMarkProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
className={className}
>
<path d="M2.3 12h2.4v10.95h6.2V14.6h4.6v8.35h6.2V12h-2.4V1.05h-6.2V9.4H8.5V1.05H2.3Z" />
</svg>
);
};
interface RollTextProps {
children: ReactNode;
}
export const RollText = ({ children }: RollTextProps) => {
return (
<span className="block h-[20px] overflow-hidden">
<span className={cn('flex flex-col transition-transform duration-500 group-hover:-translate-y-1/2', EASE)}>
<span className="block h-[20px] leading-[20px]">{children}</span>
<span className="block h-[20px] leading-[20px]" aria-hidden="true">
{children}
</span>
</span>
</span>
);
};
interface OrangeButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
label: string;
}
export const OrangeButton = ({ label, className, ...props }: OrangeButtonProps) => {
return (
<button
type="button"
className={cn(
PILL_BUTTON,
'group h-auto bg-primary py-2 ps-5 pe-2 text-[13px] text-primary-foreground hover:bg-primary/90 sm:ps-6 sm:text-[14px]',
className,
)}
{...props}
>
<RollText>{label}</RollText>
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-background sm:h-8 sm:w-8">
<ArrowRight
className={cn('size-4 text-primary transition-transform duration-500 group-hover:-rotate-45', EASE)}
/>
</span>
</button>
);
};
interface LinkIconProps {
className?: string;
}
export const LinkIcon = ({ className }: LinkIconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={className}
aria-hidden="true"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
);
};
interface PartnerIconProps {
className?: string;
}
export const PartnerIcon = ({ className }: PartnerIconProps) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" className={className} aria-hidden="true">
<path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z" />
</svg>
);
};
registry/hirael/bases/radix/templates/agency-landing/shader-background.tsx
// Agency Landing from Hirael <https://hirael.com/templates/agency-landing>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael
'use client';
import { ChromaFlow, FilmGrain, FlutedGlass, Shader, Swirl } from 'shaders/react';
export const ShaderBackground = () => {
return (
<Shader style={{ width: '100%', height: '100%' }}>
<Swirl colorA="#ffffff" colorB="#f0f0f0" detail={1.7} />
<ChromaFlow
baseColor="#ffffff"
downColor="#ff5f03"
leftColor="#ff5f03"
rightColor="#ff5f03"
upColor="#ff5f03"
momentum={13}
radius={3.5}
/>
<FlutedGlass
aberration={0.61}
angle={31}
frequency={8}
highlight={0.12}
highlightSoftness={0}
lightAngle={-90}
refraction={4}
shape="rounded"
softness={1}
speed={0.15}
/>
<FilmGrain strength={0.05} />
</Shader>
);
};