| name | stellar-launch |
| description | Use this plugin when the user wants a premium awards / venture-prize landing page in the Launchex Awards style: an inset white card shell with rounded corners, a fullscreen video hero with chamfered (clip-path) CTA, a three-column submissions section with angular nomination cards flanking a square video, and an about-the-founders stats grid with plus-darker image cards. Invoke for 'awards landing page', 'launch / prize landing', 'Stellar Launch', 'Launchex awards', or any geometric chamfered-corner editorial hero. |
| version | 0.1.0 |
| od | {"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}} |
Stellar Launch — Launchex Awards Landing Page
Produce a premium awards / venture-prize landing page ("Launchex Awards") with an editorial, angular, clip-path-driven aesthetic. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy, video URLs, and image URLs; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact shell, fonts, colors, clip-path chamfers, section layout, and responsive behavior described below.
This is the authoritative build brief. Follow it exactly — the named colors, fonts, clip-paths, video/image URLs, and breakpoints are locked.
Stack
- Default output: a single self-contained HTML file (the
example.html seed). Vanilla HTML/CSS plus one small <script> of vanilla JS for the scroll-driven page indicator.
- If the user explicitly asks for a React + Vite + Tailwind + TypeScript project, port the seed faithfully: same shell, same tokens, same markup structure, same clip-paths. Use lucide-react for the
Sparkles and ArrowUpRight icons only. Do not change the design while porting.
Fonts
Load via <link>:
- Google Fonts Inter: weights 300, 400, 500, 600, 700 (
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap).
- TT Firs Neue (display headings):
https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue.
CSS:
html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: #ffffff; }
.font-firs { font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
Color palette — locked
- Primary dark:
#154359
- Teal accent:
#066377
- Light background (submissions):
#F0F0F0
- Lighter background (about):
#F0F5F7
- Gradient text:
linear-gradient(294deg, #185B7B 20%, #4BBDF0)
- Nomination stroke:
rgba(6, 99, 119, 0.25)
Outer shell structure
.shell: height: 100vh, background: #fff, padding 12px (mobile) / 20px (≥640px)..frame: position: relative; width:100%; height:100%; overflow:hidden; background:#fff, border-radius: 28px (mobile) / 36px (≥640px). This rounded container clips all content..scroll: position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden, with .no-scrollbar. Sections live here; persistent overlays live outside .scroll but inside .frame.
Section 1 — Hero
min-height: calc(100vh - 40px), position: relative; overflow: hidden.- Background
<video> (autoplay loop muted playsinline, object-fit: cover, fills the section, z-index:0):
https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260511_151648_2bdfbd1c-6bde-4f5d-a967-f57cbced97f6-fb3729.mp4
- Overlay gradient on the video (
z-index:1): linear-gradient(to bottom, rgba(0,0,0,0.10), transparent 50%, rgba(0,0,0,0.20)).
- Top bar (
z-index:20, flex row, justify-between, padding 20px 16px 0 → 32px 40px 0 at ≥640px):
- Left: logo = lucide
Sparkles (20px → 24px, strokeWidth 1.5, white) + "launchex" (14/15px, font-semibold, tracking-tight) and "awards" below (10/11px, font-light, opacity 0.9, -mt-0.5). All white.
- Right: CTA. Teal
#066377 bg, white text, 10/11px, uppercase, letter-spacing 0.14em, font-medium, padding 12px 18px. Chamfered via clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px). Contains lucide ArrowUpRight (14px) that shifts translate(2px,-2px) on hover; button hover: brightness(1.25). Label "Send in your entry form" ≥640px, "Enter" on mobile.
- Center content (
z-index:10, flex-col, items-center, text-center, color #154359, padding-top 128px → 160px, padding-bottom 96px):
- Eyebrow "Prize for ventures": 11/12px, uppercase, letter-spacing
0.3em, font-medium, margin-bottom 24px, opacity 0.9.
- Heading "launchex"
<br/> "prizes": .font-firs, font-normal, letter-spacing -0.04em, line-height 0.9, sizes 48px / 76px (≥640) / 100px (≥1024) / 120px (≥1280).
- Subtext "Bridging visions with reality, helping ventures soar up to the stars": 12/14px, uppercase, letter-spacing
0.22em, font-medium, max-width 28rem, line-height 1.8, opacity 0.9, margin-top 32px.
Section 2 — Submissions (nominations)
- Background
#F0F0F0, padding 80px 24px → 112px 40px, position: relative; overflow: hidden.
- Layout:
max-width: 64rem; margin: 0 auto. Mobile = stacked, order center → left → right. ≥1024px = 3 columns (left | center | right), gap 40px → 48px; left and right columns pushed down with margin-top: 144px (lg:mt-36).
- Center column:
- Kicker "[submissions]" (12px, letter-spacing
0.24em, uppercase, color #154359).
- Title "submissions" below (
.font-firs, 44px → 54px, font-semibold, tracking-tight, uppercase, #154359).
- Square video below (margin-top 24px → 32px), 220px → 380px → 460px,
object-fit: cover, autoplay loop muted playsinline:
https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667-c6b971.mp4
- Left nominations (3 cards): "Lead" / "AI venture for commerce" · "Emerging innovations" / "in food commerce" · "The finest innovations" / "for learners and young students".
- Right nominations (3 cards): "Innovations for advanced" / "career training" · "The finest innovations" / "in finance" · "Categories" / "coming soon".
- NominationCard:
<a>, max-width: 20em, height: 5em, hover: translateY(-2px). Border is an SVG chamfered rectangle polygon(points="14,0 100,0 100,86 86,100 0,100 0,14"), viewBox="0 0 100 100", preserveAspectRatio="none", stroke rgba(6,99,119,0.25), stroke-width 1, vector-effect="non-scaling-stroke", fill none. Centered text: title 13px font-semibold, subtitle 12px font-normal opacity 0.8, color #154359.
- Bottom fade (
pointer-events:none; position:absolute; bottom:0; width:100%; z-index:10, height 160px → 224px): linear-gradient(to bottom, rgba(240,245,247,0) 0%, rgba(240,245,247,0.7) 60%, #F0F5F7 100%).
Section 3 — About the founders
- Background
#F0F5F7, padding 80px 24px → 112px 40px, max-width: 80rem; margin: 0 auto, relative + overflow hidden.
- Top row (color
#154359): flex-col mobile, flex-row at ≥1024px (justify-between).
- Left heading "About the"
<br/> "founders": .font-firs, 36px / 48px / 54px, font-semibold, uppercase, tracking-tight, line-height 0.95.
- Right (max-width 36rem): two paragraphs (17/18px, line-height 1.5):
- "Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations."
- "Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation."
- Link "Launchex.Hub website" →
https://base.launchex.vc/ (margin-top 24px, 14px, font-medium). Arrow in a chamfered 32×32 box, border #154359, clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); hover: translateY(-2px). Use lucide ArrowUpRight.
- Stats grid (margin-top 56px): 1 col / 2 col (≥768px) / 3 col (≥1024px), gap 20px. Card 2 pushed down with
margin-top: 96px (lg:mt-24) at ≥1024px.
- Each stat card:
- Outer:
width:100%; height: 280px → 340px; background-color: rgba(255,255,255,0.8); padding: 1.5px (acts as border), clip-path applied.
- Inner image:
width/height 100%; overflow:hidden; background-size: cover; background-position: center; mix-blend-mode: plus-darker, same clip-path.
- Text overlay (absolute): value
.font-firs, font-semibold, uppercase, 36px → 52px, gradient text linear-gradient(294deg, #185B7B 20%, #4BBDF0) (background-clip: text; color: transparent). Description 14px, line-height 1.4, #154359, margin-top 12px, max-width 66%.
- Card 1 — "7+ years" / "Launchex has served the market, guiding ventures and their journeys"; no offset; text
left:24px; right:24px; bottom:24px; clip-path polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px). Image: .
Persistent overlay elements (inside .frame, outside .scroll)
- Top nav bar: hidden on mobile (
display:none; show flex at ≥768px), absolute, top 0, centered (left:50%; translateX(-50%)), z-index:40. White bg, border-bottom-left-radius + border-bottom-right-radius: 28px. Padding 16px 24px (→ 16px 40px ≥1024px), gap 24px → 40px. Links "About", "Submissions", "Venue", "Judges", "Connect": 11px, uppercase, letter-spacing 0.14em, font-medium, #262626, hover #737373. Two decorative corner <span>s at -left-6 / -right-6 form inverted rounded corners via radial-gradient masks: left radial-gradient(circle at 0 100%, transparent 24px, black 25px), right radial-gradient(circle at 100% 100%, transparent 24px, black 25px).
- Bottom-right page indicator (
pointer-events:none, absolute, bottom 16px → 24px, right 16px → 32px, z-index:40): "01" [line] "05", flex, gap 12px, color: rgba(255,255,255,0.8), 10px, font-medium, uppercase, letter-spacing 0.18em, mix-blend-mode: difference. Line = width:32px; height:1px; background: rgba(255,255,255,0.4). The "01" updates with scroll position (1..5 across the page).
- Bottom-left scroll indicator (same offsets, left side): "Scroll to discover", same type treatment +
mix-blend-mode: difference.
Animations / interactions
- All transitions are subtle: translate, color, brightness. CTA arrow
translate(2px,-2px) on hover; CTA brightness(1.25); nomination + about-arrow translateY(-2px) on hover.
- The only JS is a passive
scroll listener on .scroll that maps scroll ratio to the page indicator number (Math.round(ratio*4)+1, clamped 1..5). (In React: a useScroll/scroll handler updating a currentPage state.)
Assets — keep remote
The two cloudfront.net .mp4 videos and the three images.higgs.ai stills are large stable CDN media — keep them as remote URLs; do not inline them. There are no local avatars or small decorations to inline (icons are inline SVG / lucide). Do not introduce figma.site, i.pravatar.cc, api.dicebear.com, or any other remote avatar host.
Responsive
- Mobile-first. Breakpoints:
sm 640px, md 768px, lg 1024px, xl 1280px.
- Hero heading scales 48 → 76 → 100 → 120px. Submissions stacks (center first) below
lg, 3-column at lg. Stats grid 1 → 2 (md) → 3 (lg) columns. Top nav hidden below md.
Hard rules
- All chamfers use
clip-path: polygon() with pixel-based cut corners — copy the exact polygons above; do not approximate with border-radius.
- Stat card images use
mix-blend-mode: plus-darker; keep it.
- No visible scrollbar anywhere (use
.no-scrollbar).
- The outer rounded
.frame clips everything; scrolling happens inside .scroll, overlays sit on top.
- Keep the two display fonts:
.font-firs (TT Firs Neue) for all headings/values, Inter for body.
