Run any Skill in Manus with one click

orbis-nft

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.

Run Skill in Manus

Stars62,518

Forks6,985

UpdatedJune 9, 2026 at 17:04

Source

nexu-io

nexu-io/open-design

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

File Explorer

3 files

SKILL.md

readonly

More from this repository

same repository

3d-creator-portfolio

nexu-io/open-design

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.

2026-06-0962.5k

acreage-farming

nexu-io/open-design

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.

2026-06-0962.5k

aerocore

nexu-io/open-design

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.

2026-06-0962.5k

ai-designer-portfolio

nexu-io/open-design

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.

2026-06-0962.5k

cinematic-landing-page

nexu-io/open-design

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.

2026-06-0962.5k

codenest-coding-platform

nexu-io/open-design

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.

2026-06-0962.5k

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}}

Orbis.Nft — Dark Space NFT Landing Page

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.

Stack

Default output: a single self-contained HTML file (the example.html seed). Everything is inline.
If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully: same tokens, same markup structure and section order, 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.

Fonts (Google Fonts)

Load via:

https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap

Anton (font-grotesk) — all headings and navigation text. Uppercase.
Condiment (font-condiment) — cursive script for accent/overlay text only (NORMAL case, never uppercased).
System monospace (font-mono) — body/description paragraphs.

Color System — locked

--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.)

Liquid Glass CSS Effect

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;
}

Texture Overlay

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.

Layout primitives

Every section's content is centered in a container with max-width: 1831px and responsive horizontal padding (24px / 640px:40px / 1024px:64px).
All text is uppercase except the Condiment cursive accents (normal-case).
Condiment accent text is neon green with mix-blend-mode: exclusion and is positioned absolutely, slightly rotated, relative to the heading it decorates.
All videos: autoplay loop muted playsinline.

Section 1 — Hero (full viewport)

Full-bleed looping muted autoplaying video, object-fit: cover, covering the section. Section has border-bottom-left-radius: 32px + border-bottom-right-radius: 32px clipping the video.
Video: https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894-f71ad1.mp4
Header: left = "Orbis.Nft" logo (Anton, 16px, uppercase). Center = nav bar with .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).
Hero heading (Anton, uppercase): 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.
Cursive accent "Nft collection" in Condiment (24px→48px responsive), absolutely positioned to the right of the heading, rotate(-1deg), neon, mix-blend-mode: exclusion, opacity: 0.9.
Social icons — desktop: 3 square 56×56 buttons stacked vertically in the top-right corner, each .liquid-glass + border-radius: 1rem. Icons: Mail, Twitter, Github (20×20). hover → background: rgba(255,255,255,0.1). Shown only at lg+.
Social icons — mobile: same 3 buttons centered horizontally below the heading, shown only below lg.

Section 2 — About / Intro (full viewport)

Full-bleed looping muted autoplaying video, object-fit: cover.
Video: https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411-2620ce.mp4
Container has generous vertical padding (64px → 96px responsive).
Top row (flex column on mobile, row at lg):
- Left: heading (Anton, uppercase, 32px→60px): Hello! / I'm orbis. Overlaid Condiment "Orbis" (neon, mix-blend exclusion, 36px→68px), absolutely at bottom-right of heading, slightly rotated.
- Right: monospace paragraph (14px→16px, uppercase, cream, max-width: 266px): "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space".
Bottom row (flex, space-between): two columns, each with 2 identical decorative copies of the same paragraph at opacity: 0.1 (nearly invisible). Right column hidden below lg. On mobile, ghost text uses color #010828 (dark on the video, effectively invisible).

Section 3 — NFT Collection Grid

Background: solid #010828 (NO video).
Header row (column on mobile, row aligned to bottom at lg):
- Left: heading (Anton, 32px→60px, uppercase): 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).
- Right: a "SEE ALL CREATORS" button — "SEE" large (32px→60px), "ALL" + "CREATORS" stacked smaller (20px→36px) beside it; below the text a neon-green bar (background: var(--neon), height 6px→10px, full button width).
Card grid: 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>.
Each card: .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.
Card videos + rarity scores:
- hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 → 8.7/10
- hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 → 9/10
- hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 → 8.2/10 (all under https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/)
Overlay bar at the bottom of each card's media: a .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).

Section 4 — CTA / Final

Background: full-WIDTH video, NOT object-cover — use display:block; width:100%; height:auto so it renders at native aspect ratio.
Video: https://plugin-assets.open-design.ai/plugins/orbis-nft/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0-afc7a8.mp4
Text content positioned absolute over the video, right-aligned block offset lg:pr-[20%] lg:pl-[15%]:
- Small "Go beyond" in Condiment cursive (neon, mix-blend exclusion, 17px→68px responsive), absolutely at top-left of the heading block, slightly rotated.
- Heading (Anton, 16px→60px, uppercase): 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.
Social icons (bottom-left, absolute): positioned 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.

Responsive

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.

Color Rules — hard

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.