Orbis.Nft — Landing Page Template (React + TS + Vite + Tailwind)

Landing page moderna (liquid glass + motion) pra drop NFT/produto digital/SaaS. Baseada na spec Orbis.Nft mas generalizável pra qualquer marca.

Stack

• Framework: React 18 + TypeScript + Vite
• Styling: Tailwind CSS + CSS custom properties
• Motion: Framer Motion (ou CSS @keyframes + prefers-reduced-motion)
• Fonts: Anton (display condensed) + Condiment (script accent) + Inter (body)
• Deploy: Vercel (edge functions opcional pra gate/wallet)

Setup rápido

pnpm create vite@latest orbis-landing -- --template react-ts
cd orbis-landing
pnpm add tailwindcss postcss autoprefixer framer-motion
pnpm dlx tailwindcss init -p

Estrutura

src/
├── main.tsx
├── App.tsx
├── components/
│   ├── Hero.tsx           # headline + CTA + orbital 3D mock
│   ├── LiquidGlass.tsx    # wrapper com backdrop-blur + border gradient
│   ├── DropCountdown.tsx  # countdown ao drop
│   ├── Manifesto.tsx      # seção texto-sobre-textura
│   ├── Gallery.tsx        # grid de items com hover tilt
│   ├── Mint.tsx           # CTA wallet connect
│   └── Footer.tsx
├── styles/
│   ├── globals.css        # fonts + CSS vars + keyframes
│   └── glass.css          # liquid glass mixin
└── assets/
    ├── fonts/             # Anton.woff2, Condiment.woff2
    └── video/             # hero-bg.mp4

Liquid glass CSS

.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.4);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

Tipografia

@font-face {
  font-family: "Anton";
  src: url("/fonts/Anton.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Condiment";
  src: url("/fonts/Condiment.woff2") format("woff2");
  font-display: swap;
}

h1.display {
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.accent {
  font-family: "Condiment", cursive;
  font-size: clamp(36px, 6vw, 96px);
  font-style: italic;
  color: var(--accent);
}

Paleta base (ajustar por marca)

:root {
  --bg: #050507;
  --fg: #f5f5f7;
  --muted: #8b8b93;
  --accent: #3dff9c;       /* trocar por cor da marca */
  --accent-alt: #ff3d6b;
}

Hero padrão

<section className="relative h-screen overflow-hidden">
  <video
    src="/video/hero-bg.mp4"
    autoPlay loop muted playsInline
    className="absolute inset-0 w-full h-full object-cover opacity-60"
  />
  <div className="relative z-10 flex h-full items-center justify-center text-center">
    <div>
      <span className="accent">the new drop is</span>
      <h1 className="display text-white">orbis</h1>
      <button className="glass mt-12 px-8 py-4">Mint now</button>
    </div>
  </div>
</section>

Performance

• Imagens em WebP + <picture> com AVIF fallback
• Vídeo hero: 1080p max, ≤4MB, preload="metadata"
• Lighthouse target: LCP < 2s, CLS < 0.05, TBT < 200ms
• Deploy Vercel edge + Image Optimization API

Adaptação Squad Film

Para lançamento de serviço/portfolio premium:

• Trocar "mint now" → "reserve sua data" / "ver case"
• Trocar cor accent pelo hex primário da marca cliente
• Hero vídeo = recorte 8s do melhor trabalho
• Galeria = 9 cases em grid 3×3 com liquid glass

Cross-ref

• Assets visuais: references/01-y2k-design.md + 04-mec-branded-ai.md
• Vídeo hero motion: references/03-tim-koda-motion.md
• Publicação paid: references/06-viznfr-ad-dashboard.md