ZeroSum-Solutions/mishmash

Orbis.Nft — Dark Space NFT Landing Page

Landing page vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A single-page NFT landing site with four full-bleed sections (Hero, About, Collection, CTA) on a dark space theme. The page uses looping muted background videos, a CSS liquid-glass UI effect, a fixed grain texture overlay, and a tight color system (deep navy #010828, off-white #EFF4FF, neon green #6FFF00; Anton headings, Condiment cursive accents, system mono body). Showcases a three-card NFT collection grid with rarity scores and video previews.

Workflow

1. Clone example.html into the user's workspace as the working file.
2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
3. Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
4. Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="orbis-nft-landing" type="text/html" title="Orbis.Nft — Dark Space NFT Landing Page">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

Orbis.Nft — Dark Space NFT Landing Page

Overview

Build a single-page NFT landing page called Orbis.Nft with four full-bleed sections on a dark space theme. The page leans on looping muted background videos, a "liquid glass" UI effect, a fixed grain/texture overlay, and a tight color/font system. Recreate it exactly as described below.

Tech Stack

• Framework: React 18 (react ^18.3.1, react-dom ^18.3.1) + TypeScript (^5.6.3)
• Build tool: Vite (^5.4.10) with @vitejs/plugin-react (^4.3.3); entry point src/main.tsx rendered into <div id="root">
• Styling: Tailwind CSS (^3.4.14) with postcss (^8.4.49) and autoprefixer (^10.4.20)
• Icons: Lucide (lucide-react ^0.460.0) — Mail, Twitter, Github
• Fonts: Anton and Condiment via Google Fonts; system monospace for body copy
• Notable techniques: looping muted autoplay HTML video backgrounds, CSS liquid-glass effect (backdrop-filter blur + gradient border mask), fixed full-screen texture overlay with mix-blend-mode, padding-bottom square aspect-ratio trick, responsive sizing with sm:/md:/lg: breakpoints
• No additional packages are needed beyond what Vite + React + Tailwind provide.

The original background/card videos were served from a CloudFront origin (https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/...). In the project they are vendored locally under public/assets/ and referenced with /assets/... paths (see each section below). The local lowercase filenames are the ground truth.

Global Setup

Fonts (Google Fonts)

• Anton — used for all headings and navigation text (aliased as font-grotesk in Tailwind).
• Condiment — a cursive script used for accent/overlay text (aliased as font-condiment in Tailwind).
• System monospace font (font-mono) — used for body/description paragraphs.

Loaded in index.html (with preconnect hints):

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap"
  rel="stylesheet"
/>

The document <title> is Orbis.Nft — Beyond Earth and the meta description is Orbis.Nft — a collection of space objects beyond earth and its familiar boundaries.

Color System (Tailwind config)

Extend the Tailwind theme with these named colors:

• background: #010828 — deep dark navy blue
• cream: #EFF4FF — off-white, used for all text
• neon: #6FFF00 — bright green, used for accent cursive text and underline bars

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        background: '#010828',
        cream: '#EFF4FF',
        neon: '#6FFF00',
      },
      fontFamily: {
        grotesk: ['Anton', 'sans-serif'],
        condiment: ['Condiment', 'cursive'],
      },
    },
  },
  plugins: [],
}

Base styles (src/index.css)

Tailwind layers plus base body styling, the liquid-glass component classes, and the texture overlay:

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  background-color: #010828;
  color: #eff4ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  .liquid-glass {
    background: rgba(255, 255, 255, 0.01);
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }
  .liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
      rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
      rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .texture-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background-image: url('/texture.png');
    background-size: cover;
    mix-blend-mode: lighten;
    opacity: 0.6;
  }
}

Liquid glass effect

Applied via the .liquid-glass class. It is used on the navbar, social icon buttons, NFT cards, and card overlays. The effect combines a near-transparent white background with background-blend-mode: luminosity, a blur(4px) backdrop filter, an inset highlight box-shadow, and a gradient-masked ::before pseudo-element that draws a subtle 1.4px highlighted border.

Texture overlay

A full-screen fixed texture overlay sits on top of everything (z-50, pointer-events: none). It uses a /texture.png image with mix-blend-mode: lighten at opacity: 0.6, covering the entire viewport with background-size: cover. It is rendered last in App as <div className="texture-overlay" aria-hidden="true" />.

App Structure

App renders a single <main className="bg-background text-cream"> wrapping the four sections in order, followed by the texture overlay:

import About from './components/About'
import Collection from './components/Collection'
import Cta from './components/Cta'
import Hero from './components/Hero'

export default function App() {
  return (
    <main className="bg-background text-cream">
      <Hero />
      <About />
      <Collection />
      <Cta />
      {/* Full-screen grain overlay above everything */}
      <div className="texture-overlay" aria-hidden="true" />
    </main>
  )
}

Shared socials data (src/socials.ts)

A shared SOCIALS array drives every social-icon list (hero desktop, hero mobile, and CTA):

import { Github, Mail, Twitter, type LucideIcon } from 'lucide-react'

export interface Social {
  label: string
  href: string
  Icon: LucideIcon
}

export const SOCIALS: Social[] = [
  { label: 'Email', href: 'mailto:[email protected]', Icon: Mail },
  { label: 'Twitter', href: 'https://twitter.com', Icon: Twitter },
  { label: 'Github', href: 'https://github.com', Icon: Github },
]

Global Layout Conventions

• Max content width: 1831px across all sections (max-w-[1831px], centered with mx-auto).
• Horizontal padding: px-5 sm:px-8 lg:px-12 on the inner containers.
• Responsive: mobile-first with sm:, md:, lg: breakpoints throughout.
• All videos: autoPlay loop muted playsInline attributes.
• Casing: all text is uppercase except the Condiment cursive accents, which are normal-case (normal-case). In JSX the copy is written in natural case and rendered uppercase via the uppercase utility.

Section 1 — Hero (src/components/Hero.tsx)

Full viewport: <section className="relative h-screen overflow-hidden rounded-b-[32px]"> — note the rounded-b-[32px] bottom corners that clip the video.

• Background: full-bleed looping muted autoplaying video covering the entire section with object-cover (className="absolute inset-0 h-full w-full object-cover").
  • Video: /assets/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4
• Container: relative z-10 mx-auto flex h-full max-w-[1831px] flex-col px-5 sm:px-8 lg:px-12.

Header

<header className="relative flex items-center justify-between pt-6 lg:pt-8">

• Left logo: Orbis.Nft link in Anton, text-[16px], uppercase, tracking-wide text-cream (font-grotesk text-[16px] uppercase tracking-wide text-cream).
• Center navigation: a liquid-glass nav, rounded-[28px] px-[52px] py-[24px], absolutely centered (absolute left-1/2 -translate-x-1/2) and hidden on mobile (hidden ... lg:block). It contains a flex items-center gap-10 list of 5 links: Homepage, Gallery, Buy NFT, FAQ, Contact. Each link is Anton text-[13px] uppercase tracking-wide text-cream with transition-colors hover:text-neon.
• Social icons (desktop): a hidden flex-col gap-3 lg:flex column in the top-right, rendering 3 SocialButtons.

Hero content

A vertically centered block: flex flex-1 flex-col items-start justify-center, with the heading group offset by lg:ml-32.

• Heading (<h1>) in Anton, uppercase, text-cream, responsive text-[40px] mobile / sm:text-[60px] / md:text-[75px] / lg:text-[90px]; leading leading-[1.05] mobile, sm:leading-[1] tablet+; max width max-w-[640px] rising to lg:max-w-[780px]. Copy (with a <br /> between lines):

  Beyond earth
  and ( its ) familiar boundaries
  

• Overlaid cursive accent: the text Nft collection in Condiment (font-condiment), normal-case, neon green (text-neon), opacity-90 mix-blend-exclusion, slightly rotated (-rotate-1), positioned absolute to the right of the heading (absolute -right-2 bottom-[18%] → sm:-right-6 → lg:-right-16). Responsive sizing: text-[24px] / sm:text-[32px] / md:text-[40px] / lg:text-[48px].

• Social icons (mobile): the same 3 buttons centered horizontally below the heading (mt-10 flex w-full justify-center gap-4 lg:hidden).

SocialButton (hero)

Each is a 56×56px square (h-14 w-14) liquid-glass anchor, rounded-[1rem], centered icon, text-cream, with transition hover:bg-white/10. The Lucide icon is h-5 w-5 (20×20px) with strokeWidth={1.75}:

function SocialButton({ label, href, Icon }: (typeof SOCIALS)[number]) {
  return (
    <a
      href={href}
      aria-label={label}
      className="liquid-glass flex h-14 w-14 items-center justify-center rounded-[1rem] text-cream transition hover:bg-white/10"
    >
      <Icon className="h-5 w-5" strokeWidth={1.75} />
    </a>
  )
}

Section 2 — About / Intro (src/components/About.tsx)

Full viewport: <section className="relative min-h-screen overflow-hidden">

• Background: full-bleed looping muted autoplaying video with object-cover (absolute inset-0 h-full w-full object-cover).
  • Video: /assets/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
• Container: same max-w-[1831px], centered, flex min-h-screen ... flex-col justify-between with generous vertical padding py-16 md:py-20 lg:py-24 and px-5 sm:px-8 lg:px-12.

Top row

flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between

• Left heading (<h2>) in Anton, uppercase, text-cream, leading-[1.05], responsive text-[32px] / sm:text-[40px] / md:text-[48px] / lg:text-[60px]. Copy (with a <br />):

  Hello!
  I'm orbis
  

  (The apostrophe is the ’ entity: I’m orbis.)

• Overlaid cursive accent: Orbis in Condiment, normal-case, neon green (text-neon), mix-blend-exclusion, slightly rotated (-rotate-2), positioned absolute at the bottom-right of the heading (absolute -bottom-6 -right-10 → sm:-right-16 → lg:-bottom-8 lg:-right-24). Responsive sizing: text-[36px] / sm:text-[48px] / md:text-[56px] / lg:text-[68px].

• Right paragraph: monospace, uppercase, cream, max-w-[266px], responsive text-[14px] → lg:text-[16px], leading-relaxed. Text:

  A digital object fixed beyond time and place. An exploration of distance, form, and silence in space

Bottom row — decorative ghost copy

mt-16 flex justify-between containing two GhostParagraphs columns. The right column is hidden lg:block.

Each GhostParagraphs is a flex max-w-[266px] flex-col gap-8 column of 2 identical paragraphs using the same about copy. They are styled font-mono text-[14px] uppercase leading-relaxed text-[#010828] opacity-10 lg:text-[16px] lg:text-cream — i.e. nearly invisible decorative copy (opacity-10); on mobile the text color is text-[#010828] (dark, effectively invisible against the video), switching to lg:text-cream on desktop.

Section 3 — NFT Collection Grid (src/components/Collection.tsx)

<section className="bg-[#010828] py-16 md:py-20 lg:py-24"> — solid #010828 background, no video.

• Container: same max-w-[1831px], centered, px-5 sm:px-8 lg:px-12.

Header row

mb-12 flex flex-col gap-10 sm:flex-row sm:items-end sm:justify-between lg:mb-16

• Left heading (<h2>) in Anton, uppercase, text-cream, leading-[1.1], responsive text-[32px] / sm:text-[40px] / md:text-[48px] / lg:text-[60px]:

  Collection of
    Space objects
  

  The second line is a block indented with ml-12 sm:ml-24 lg:ml-32. Within it, Space is Condiment cursive neon green (font-condiment normal-case text-neon) and objects stays in Anton.

• Right "See all creators" button: an <a> link, group inline-block shrink-0. See is large (text-[32px] / sm:text-[40px] / md:text-[48px] / lg:text-[60px], leading-none), with All and Creators stacked smaller in a column next to it (text-[20px] / sm:text-[24px] / md:text-[30px] / lg:text-[36px], leading-[1.05]), all Anton uppercase cream, laid out flex items-end gap-3. Below the text is a neon green bar (mt-3 block h-[6px] w-full bg-neon ... md:h-[8px] lg:h-[10px]) that turns cream on hover (transition group-hover:bg-cream).

NFT card grid

grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 — 1 column mobile, 2 tablet, 3 desktop, 24px gap.

Each card is rendered by NftCard from this data:

const CARDS = [
  {
    video:
      '/assets/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4',
    score: '8.7/10',
    name: 'Orbis #001',
  },
  {
    video:
      '/assets/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4',
    score: '9/10',
    name: 'Orbis #002',
  },
  {
    video:
      '/assets/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4',
    score: '8.2/10',
    name: 'Orbis #003',
  },
]

NftCard

• Card container: <article className="liquid-glass rounded-[32px] p-[18px] transition hover:bg-white/10"> — liquid-glass, rounded-[32px], 18px padding, hover:bg-white/10.
• Square video container: relative overflow-hidden rounded-[24px] pb-[100%] — the pb-[100%] padding-bottom trick produces a square aspect ratio; the video fills it absolutely (absolute inset-0 h-full w-full object-cover).
• Rarity overlay bar: a liquid-glass bar pinned to the bottom (absolute bottom-3 left-3 right-3 flex items-center justify-between rounded-[20px] px-5 py-4).

  • Label: Rarity score: in monospace, text-[11px], uppercase, tracking-wide, text-cream/70.

  • Score value: the card's score (e.g. 8.7/10) in Anton, text-[16px], uppercase, text-cream.

  • Circular button: a 48×48px (h-12 w-12) shrink-0 circular purple gradient button (rounded-full bg-gradient-to-br from-[#b724ff] to-[#7c3aed]), text-cream, shadow-lg shadow-purple-500/50, transition hover:scale-110, with aria-label={Open ${name}}. Inside is a right-arrow chevron SVG:

    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
    

Section 4 — CTA / Final Section (src/components/Cta.tsx)

<section className="relative overflow-hidden">

• Background: full-width video that displays at its native aspect ratio — className="block h-auto w-full" (i.e. not object-cover; w-full h-auto block).
  • Video: /assets/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4

Text content (positioned absolute over the video)

A right-aligned block: absolute inset-0 flex items-center justify-end px-6 sm:px-10 lg:pl-[15%] lg:pr-[20%], inner relative text-right.

• Cursive accent: Go beyond in Condiment, normal-case, neon green (text-neon), mix-blend-exclusion, rotated (-rotate-2), positioned absolute at the top-left of the heading block (absolute -left-6 -top-4 → sm:-left-12 sm:-top-8 → md:-left-20 → lg:-left-28 lg:-top-12). Responsive sizing: text-[17px] / sm:text-[34px] / md:text-[51px] / lg:text-[68px].

• Heading (<h2>) in Anton, uppercase, text-cream, leading-[1.15], responsive text-[16px] / sm:text-[30px] / md:text-[45px] / lg:text-[60px]:

  Join us.
  Reveal what's hidden.
  Define what's next.
  Follow the signal.
  

  Join us. is wrapped in a block with extra bottom margin (mb-4 sm:mb-6 md:mb-8 lg:mb-12) before the remaining lines (which use <br /> separators). The apostrophes use the ’ entity (what’s).

Social icons (bottom-left, absolute positioned)

A vertical liquid-glass container positioned at left-[8%] with a responsive bottom offset and radius: absolute bottom-[12%] left-[8%] flex flex-col rounded-[0.5rem] sm:bottom-[14%] sm:rounded-[0.75rem] md:bottom-[16%] md:rounded-[1rem] lg:bottom-[20%] lg:rounded-[1.25rem].

It maps over SOCIALS (Mail, Twitter, Github) to render 3 stacked anchor buttons:

• Responsive widths/heights mixing viewport units and rem: h-[10vw] w-[14vw] → sm:h-[4.5rem] sm:w-[14.375rem] → md:h-[3.75rem] md:w-[10.78125rem] → lg:h-[5.25rem] lg:w-[16.77rem].
• Centered icon, text-cream, transition hover:bg-white/10.
• Buttons are separated by border-b border-white/10 dividers, applied to every button except the last (index < SOCIALS.length - 1 ? 'border-b border-white/10' : '').
• The Lucide icon is responsive: h-4 w-4 sm:h-5 sm:w-5 lg:h-6 lg:w-6 with strokeWidth={1.75}.

File Structure

orbis-nft-landing/
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.ts
├── public/
│   ├── texture.png
│   └── assets/
│       ├── hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4   (Hero)
│       ├── hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4   (About)
│       ├── hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4   (Card 1 — 8.7/10)
│       ├── hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4   (Card 2 — 9/10)
│       ├── hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4   (Card 3 — 8.2/10)
│       └── hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4   (CTA)
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── index.css
    ├── socials.ts
    └── components/
        ├── Hero.tsx
        ├── About.tsx
        ├── Collection.tsx
        └── Cta.tsx

Source & license

Vendored from MIT-licensed pulkitxm/claude-directory. The upstream MIT licence text ships in this template at LICENSE and must be redistributed alongside any copy of example.html or assets/.

Webfonts and full-resolution imagery are not vendored: local @font-face rules are served from the Google Fonts CDN and referenced images are downscaled. Fetch the upstream folder for the original assets.