メニュー
Use this plugin when the user wants a dark, space-themed NFT collection landing page ("Orbis.Nft") with full-bleed CloudFront video backgrounds, a liquid-glass UI, Anton + Condiment fonts, and a neon-green accent. Invoke for 'NFT landing page', 'space NFT site', 'crypto collection page', or when the user references the Orbis NFT template.
| name | orbis-nft |
| description | Use this plugin when the user wants a dark, space-themed NFT collection landing page ("Orbis.Nft") with full-bleed CloudFront video backgrounds, a liquid-glass UI, Anton + Condiment fonts, and a neon-green accent. Invoke for 'NFT landing page', 'space NFT site', 'crypto collection page', or when the user references the Orbis NFT template. |
| version | 0.1.0 |
| od | {"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}} |
Produce a premium, dark space-themed NFT collection landing page named "Orbis.Nft" with 4 sections, full-bleed looping CloudFront video backgrounds, a liquid glass UI effect, and a locked color/font system. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, glass treatment, layout, fonts, and section structure described below.
This is the authoritative build brief. Follow it exactly — named colors, fonts, video URLs, radii, and per-section layout are locked.
example.html seed). Everything is inline.lucide-react for the Mail / Twitter / Github icons, Anton + Condiment from Google Fonts. Do not change the design while porting. Alias Anton as font-grotesk and Condiment as font-condiment in the Tailwind config; map body text to font-mono.Load via:
https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap
font-grotesk) — all headings and navigation text. Uppercase.font-condiment) — cursive script for accent/overlay text only (NORMAL case, never uppercased).font-mono) — body/description paragraphs.--bg: #010828 /* deep dark navy blue page background */
--cream: #EFF4FF /* off-white, used for ALL text */
--neon: #6FFF00 /* bright green: cursive accent text + underline bars */
Do not introduce other accent hues for text/bars. The neon green #6FFF00 is locked. (The only other vivid color allowed is the NFT-card arrow button's purple gradient — see Section 3.)
Applied via a .liquid-glass class on the navbar, social icon buttons, NFT cards, and card overlay bars:
.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;
}
A full-screen FIXED texture overlay sits on top of everything (z-index: 50, pointer-events: none), mix-blend-mode: lighten, opacity: 0.6, background-size: cover, covering the whole viewport. The original prompt uses a /texture.png grain image. The seed inlines a small SVG fractal-noise data URI in its place so the page is self-contained and never 404s in the sandbox — keep that inline data URI. If the user supplies a real texture.png, swap only the background-image URL; do not change the blend mode / opacity / z-index.
max-width: 1831px and responsive horizontal padding (24px / 640px:40px / 1024px:64px).mix-blend-mode: exclusion and is positioned absolutely, slightly rotated, relative to the heading it decorates.autoplay loop muted playsinline.object-fit: cover, covering the section. Section has border-bottom-left-radius: 32px + border-bottom-right-radius: 32px clipping the video.https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894-f71ad1.mp4.liquid-glass, border-radius: 28px, padding 24px 52px, 5 links (Homepage, Gallery, Buy NFT, FAQ, Contact), each Anton 13px uppercase with hover → neon. Nav is display:none below lg (1024px).Beyond earth / and ( its ) familiar boundaries. Responsive font-size 40px / sm:60px / md:75px / lg:90px; line-height 1.05 mobile, 1 tablet+. max-width: 780px, offset margin-left: 8rem at lg.rotate(-1deg), neon, mix-blend-mode: exclusion, opacity: 0.9..liquid-glass + border-radius: 1rem. Icons: Mail, Twitter, Github (20×20). hover → background: rgba(255,255,255,0.1). Shown only at lg+.lg.object-fit: cover.https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411-2620ce.mp4Hello! / I'm orbis. Overlaid Condiment "Orbis" (neon, mix-blend exclusion, 36px→68px), absolutely at bottom-right of heading, slightly rotated.max-width: 266px): "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space".opacity: 0.1 (nearly invisible). Right column hidden below lg. On mobile, ghost text uses color #010828 (dark on the video, effectively invisible).#010828 (NO video).Collection of then an indented second line Space objects, where "Space" is Condiment cursive neon and "objects" is Anton. Second line indented ml-12 / ml-24 / ml-32 responsive (3rem / 6rem / 8rem).background: var(--neon), height 6px→10px, full button width).lg:grid-cols-3, sm:grid-cols-2, 1 col mobile, gap 24px. Render the 3 NFT cards from the data array in the seed's <script>..liquid-glass, border-radius: 32px, padding 18px, hover → background: rgba(255,255,255,0.1). Inside: a square video container (padding-bottom:100% aspect trick), border-radius: 24px, overflow: hidden, the looping video filling it.hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 → 8.7/10hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 → 9/10hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 → 8.2/10
(all under https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/).liquid-glass bar, border-radius: 20px, padding 16px 20px, showing a "RARITY SCORE:" label (11px, cream at 70% opacity) and the score value (16px). On the right: a circular purple-gradient button 48×48 (linear-gradient(to bottom right, #b724ff, #7c3aed)) with a right-chevron SVG inside, box-shadow purple glow, hover → scale(1.1).object-cover — use display:block; width:100%; height:auto so it renders at native aspect ratio.https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0-afc7a8.mp4lg:pr-[20%] lg:pl-[15%]:
mix-blend exclusion, 17px→68px responsive), absolutely at top-left of the heading block, slightly rotated.JOIN US. / REVEAL WHAT'S HIDDEN. / DEFINE WHAT'S NEXT. / FOLLOW THE SIGNAL. "JOIN US." has extra bottom margin (16px→48px) before the remaining lines.left-[8%], bottom-[12%]→bottom-[20%] responsive. A vertical .liquid-glass container (border-radius: 0.5rem→1.25rem responsive) holding 3 stacked icon buttons (Mail, Twitter, Github). Buttons use responsive viewport/rem sizing (w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem] and matching heights). Buttons separated by border-bottom: 1px solid rgba(255,255,255,0.1) dividers except the last.Mobile-first with sm: (640px), md: (768px), lg: (1024px) breakpoints throughout. Nav hides below lg; hero social switches from vertical-desktop to horizontal-mobile; about right ghost column hides below lg; card grid steps 1 → 2 → 3 columns.
Page background #010828, all text cream #EFF4FF, neon #6FFF00 for cursive accents and bars. Do not substitute the neon hue. The only other vivid color is the NFT card's purple arrow-button gradient (#b724ff → #7c3aed); keep it as-is.
Use this plugin when the user wants a dark, premium 3D-creator / designer portfolio landing page: a full-viewport hero with a gradient-text headline and a mouse-following magnetic 3D portrait, a scroll-driven horizontal image marquee, an About section with corner 3D decorations and character-by-character scroll-reveal text, a white Services list, and sticky-stacking project cards. Invoke for '3D creator portfolio', 'designer landing page', 'creative portfolio with magnetic hero', or when the user references the Jack 3D Creator template.
Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for 'farming landing page', 'agritech marketing site', 'precision agriculture site', or when the user references the Acreage Farming template.
Use this plugin when the user wants a premium dark-to-light aerospace / propulsion marketing site: a scroll-driven gradient hero with parallax wordmark and an engine still, a film-card that grows from a mission thumbnail into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart with category tabs, a horizontal video-story rail, and a starfield footer. Invoke for 'aerospace landing', 'engine / propulsion site', 'EngineTech', 'scroll-cinematic hero', or when the user references the AeroCore template.
Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template.
Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.
Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.