Creative Studio

Dark, cinematic creative-studio landing page: a full-viewport hero with an animated backdrop and pull-up wordmark, a scroll-revealed about section, and a staggered feature-card grid. Framer Motion throughout, with a self-contained warm-cream palette.

Preview

Installation

npx shadcn@latest add https://hirael.com/r/creative-studio.json

Code

components/templates/creative-studio/creative-studio.tsx

"use client";

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

import { About } from "./about";
import { Features } from "./features";
import { almarai, instrumentSerif } from "./fonts";
import { Footer } from "./footer";
import { Hero } from "./hero";

const CREATIVE_STUDIO_CSS = `
.creative-studio {
  --cs-cream: #e1e0cc;
  --cs-ink: #dedbc8;
  --cs-muted: #8b8a80;
}
`;

export default function CreativeStudio() {
  return (
    <div
      className={cn(
        "creative-studio",
        almarai.variable,
        instrumentSerif.variable,
        "bg-black text-(--cs-ink) antialiased",
      )}
      style={{
        fontFamily: "var(--font-almarai), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <style dangerouslySetInnerHTML={{ __html: CREATIVE_STUDIO_CSS }} />
      <Hero />
      <About />
      <Features />
      <Footer />
    </div>
  );
}

Dependencies

npm

framer-motionlucide-react