twotalesanimation
79 lines
3.8 KiB
TypeScript
79 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import Fox from "./Fox";
|
|
import Timecode from "./Timecode";
|
|
import { site } from "@/content/site";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative flex min-h-[100svh] items-end overflow-hidden pt-32 md:pt-44">
|
|
{/* Plate: showreel if configured, otherwise a moving light field */}
|
|
{site.reel ? (
|
|
<video
|
|
className="absolute inset-0 h-full w-full object-cover opacity-60"
|
|
src={site.reel}
|
|
poster={site.reelPoster ?? undefined}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0" aria-hidden="true">
|
|
<div className="animate-drift absolute top-[10%] left-[45%] h-[70vmax] w-[70vmax] rounded-full bg-[radial-gradient(circle,rgb(232_87_42/0.28),transparent_60%)] blur-2xl" />
|
|
<div
|
|
className="animate-drift absolute top-[-20%] left-[-20%] h-[60vmax] w-[60vmax] rounded-full bg-[radial-gradient(circle,rgb(70_110_160/0.22),transparent_60%)] blur-2xl"
|
|
style={{ animationDelay: "-9s" }}
|
|
/>
|
|
<Fox className="absolute top-1/2 right-[-8vw] h-[85vh] w-auto -translate-y-1/2 text-white/[0.035]" />
|
|
<div className="animate-scan absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-ink/30" aria-hidden="true" />
|
|
|
|
{/* Viewer HUD */}
|
|
<div
|
|
className="pointer-events-none absolute inset-x-5 top-24 bottom-6 hidden font-mono text-[10px] tracking-[0.25em] text-white/40 uppercase md:inset-x-8 md:top-28 md:block"
|
|
aria-hidden="true"
|
|
>
|
|
<span className="absolute top-0 left-0 h-4 w-4 border-t border-l border-white/30" />
|
|
<span className="absolute top-0 right-0 h-4 w-4 border-t border-r border-white/30" />
|
|
<span className="absolute bottom-0 left-0 h-4 w-4 border-b border-l border-white/30" />
|
|
<span className="absolute right-0 bottom-0 h-4 w-4 border-r border-b border-white/30" />
|
|
<span className="absolute top-3 left-6">TTVFX_REEL_v{String(new Date().getFullYear()).slice(2)}1</span>
|
|
<span className="absolute top-3 right-6">ACEScg · 24 fps</span>
|
|
<Timecode className="absolute right-6 bottom-3" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto w-full max-w-7xl px-5 pb-20 md:px-8 md:pb-28">
|
|
<p className="mb-6 font-mono text-xs tracking-[0.3em] text-accent uppercase">
|
|
Visual effects studio · Est. {site.founded}
|
|
</p>
|
|
<h1 className="font-display text-[9.5vw] leading-[0.95] font-thin tracking-tight uppercase md:text-[8.5vw] xl:text-[8rem]">
|
|
Invisible work.
|
|
<br />
|
|
<span className="font-light">Unforgettable</span> frames.
|
|
</h1>
|
|
<div className="mt-10 flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
|
|
<p className="max-w-md text-base leading-relaxed text-muted md:text-lg">
|
|
Compositing, CG and finishing for series, film and commercials, built on a pipeline we wrote ourselves.
|
|
</p>
|
|
<div className="flex gap-3">
|
|
<Link
|
|
href="/work/"
|
|
className="bg-fg px-5 py-3.5 whitespace-nowrap md:px-6 font-mono text-xs tracking-[0.2em] text-ink uppercase transition-colors hover:bg-accent"
|
|
>
|
|
View work
|
|
</Link>
|
|
<Link
|
|
href="/#contact"
|
|
className="border border-white/25 px-5 py-3.5 font-mono text-xs tracking-[0.2em] whitespace-nowrap uppercase transition-colors hover:border-fg md:px-6"
|
|
>
|
|
Start a project
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|