Northstar

Dark tech landing with modular feature cards, restrained glow and scroll-driven storytelling.

Dark technology landingDark tech landing with modular feature cards, restrained glow and scroll-driven storytelling.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Websites
Category: Technology
Style: Dark
Tech stack: GSAP
Animation: Glow
Libraries: gsap
Difficulty: Intermediate
License: Personal
Access: Free
Creator: Daniel Reed
Views: 255

Glow
Scroll
GSAP
React
Tailwind

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Design Northstar — a dark technology product landing (React + Tailwind + light GSAP).

Restrained glow (opacity ≤ 0.2), modular feature cards below the fold only, hero stays one composition: brand, headline, one sentence, CTA, ambient field.

Sections: product story, capabilities grid, integration logos, pricing, FAQ, final CTA. Avoid purple gradients. Use cool neutrals + one lime or cyan accent.

Code

<!-- HTML -->
<canvas id="c"></canvas>

/* CSS */
canvas{display:block;width:100%;height:100%;background:#030308}

// JS
var c=document.getElementById("c"),x=c.getContext("2d"),stars=[],w,h;function R(){w=c.width=c.clientWidth;h=c.height=c.clientHeight;stars=[];for(var i=0;i<90;i++)stars.push({x:Math.random()*w,y:Math.random()*h,z:.2+Math.random(),s:Math.random()*1.8})}function d(){x.fillStyle="rgba(3,3,8,.35)";x.fillRect(0,0,w,h);stars.forEach(function(s){s.y+=s.z*.8;if(s.y>h){s.y=0;s.x=Math.random()*w}x.fillStyle="hsl(130 85% 62%)";x.globalAlpha=.3+s.z*.7;x.fillRect(s.x,s.y,s.s,s.s)});x.globalAlpha=1;requestAnimationFrame(d)}window.addEventListener("resize",R);R();d();