# 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. A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/agency-landing). - Page, with a live preview: https://shadcn.exchange/r/hirael/agency-landing - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/agency-landing-light-383cec36a31ce6a1.png - Registry item: https://hirael.com/r/agency-landing.json - Categories: templates - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://hirael.com/r/agency-landing.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`, `shaders` ## Files ### `registry/hirael/bases/radix/templates/agency-landing/agency-landing.tsx` ```tsx // Agency Landing from Hirael // 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 (
); }; export default AgencyLanding; ``` ### `registry/hirael/bases/radix/templates/agency-landing/hero.tsx` ```tsx // Agency Landing from Hirael // 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 ( <>
Hirael Studio

We craft digital experiences
for brands ready to dominate
their category online.

Certified Partner Featured
setMenuOpen(false)} />
); }; ``` ### `registry/hirael/bases/radix/templates/agency-landing/about.tsx` ```tsx // Agency Landing from Hirael // 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 (
1 Introducing Hirael

Strategy-led creatives, delivering
results in digital and beyond.

{PARAGRAPH}

{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
{/* eslint-disable-next-line @next/next/no-img-element */}

{PARAGRAPH}

{/* eslint-disable-next-line @next/next/no-img-element */}
); }; ``` ### `registry/hirael/bases/radix/templates/agency-landing/case-studies.tsx` ```tsx // Agency Landing from Hirael // 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 (
2 Featured client work

Our projects

Winner of Site of the Month 2025 - an interactive 3D showcase driving record engagement

Narrativ

Transforming a dated platform into a conversion-focused brand experience

Luminar

); }; ``` ### `registry/hirael/bases/radix/templates/agency-landing/footer.tsx` ```tsx // Agency Landing from Hirael // 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 (
Work with us

Ready to dominate
your category?

Hirael

A strategy-led studio crafting digital experiences for growing brands.

Taking on projects for Q1 2026
{LINK_COLUMNS.map((col) => ( ))}
Hirael

© 2026 Hirael Studio. All rights reserved.

); }; ``` ### `registry/hirael/bases/radix/templates/agency-landing/primitives.tsx` ```tsx // Agency Landing from Hirael // 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 ( ); }; interface RollTextProps { children: ReactNode; } export const RollText = ({ children }: RollTextProps) => { return ( {children} ); }; interface OrangeButtonProps extends Omit, 'children'> { label: string; } export const OrangeButton = ({ label, className, ...props }: OrangeButtonProps) => { return ( ); }; interface LinkIconProps { className?: string; } export const LinkIcon = ({ className }: LinkIconProps) => { return ( ); }; interface PartnerIconProps { className?: string; } export const PartnerIcon = ({ className }: PartnerIconProps) => { return ( ); }; ``` ### `registry/hirael/bases/radix/templates/agency-landing/shader-background.tsx` ```tsx // Agency Landing from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import { ChromaFlow, FilmGrain, FlutedGlass, Shader, Swirl } from 'shaders/react'; export const ShaderBackground = () => { return ( ); }; ```