Workspace / template / template

Shader Forward Template

A statement page led by the stage hero running a live effect engine, with a capabilities timeline, one enormous counted stat, and a dark close. Built to show what the canvas can do.

Workspacetemplatetemplate

paxfx add blocks/template-shader-forwardlocal only

Tier: high. Reduced motion: The stage holds its first frame; all sections render settled.

"use client";

import { NavigationBar } from "../../navigation/NavigationBar.js";
import { HeroStage } from "../../hero/HeroStage.js";
import { FeaturesTimeline } from "../../features/FeaturesTimeline.js";
import { StatsCounter } from "../../stats/StatsCounter.js";
import { CtaNight } from "../../cta/CtaNight.js";
import { FooterMinimal } from "../../footer/FooterMinimal.js";

/**
 * Shader forward template: the page opens on a live effect engine and
 * keeps the theatrics honest from there. Built to show what the canvas
 * can do without burying the message under it.
 */
export default function ShaderForwardPage() {
  return (
    <main data-pax-asset="template-shader-forward">
      <NavigationBar />
      <HeroStage
        copy={{
          eyebrow: "Signal",
          title: "Attention is earned on the first frame.",
          description:
            "Signal renders your data as living canvas scenes that hold a reader long enough to make the point. Reduced motion gets a considered still, not an empty box.",
          primaryCta: { label: "See it live", href: "#demo" },
          secondaryCta: { label: "How it works", href: "#how" },
        }}
      />
      <FeaturesTimeline />
      <StatsCounter />
      <CtaNight
        copy={{
          title: "Put something worth watching above the fold.",
          primaryCta: { label: "Get Signal", href: "#pricing" },
        }}
      />
      <FooterMinimal />
    </main>
  );
}