Dark voice AI hero with frosted glass welcome card and JS-generated 90-bar colour animation
Dark centred hero template for voice AI product landing pages with a bold headline, two CTA buttons, a frosted glass welcome card with prompt chips, and a JavaScript-generated 90-bar colour animation at the bottom of the section. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A centred dark hero on a near-black background. A large bold headline and a short grey sub-paragraph introduce the product above two CTA buttons: a solid white primary and a transparent bordered secondary. Below, a frosted glass welcome card shows a greeting message and a row of prompt chips: make a phone call, book a meeting, route a call, and a voice selector. Ninety coloured bars are generated at runtime by a short JavaScript loop and sit absolute-positioned at the very bottom of the section as a decorative element. Each bar has a randomised height and one of twelve cycling brand colours. No external chart library is needed.
Common questions about this template
How do I change the bar colours and heights?
Ask your vibe coding tool to update the cols array in the script block. The default twelve colours cycle through pink, purple, blue, green, yellow, and orange. Replace any hex value with your brand colours. Each bar height is randomised between 40px and 250px — change the Math.random() calculation to set fixed heights.
How do I change the welcome card prompt chips?
Ask Bolt, Claude Code, Replit, or Lovable to update the text inside the .chip span elements. The default chips are Make a phone call, Book a meeting, Route a call, and a Moon Voice selector. Replace them with your product actions. The wand chip on the left is a decorative icon chip with no text.
How do I change the welcome message?
Ask your vibe coding tool to update the text inside the p element in the .welcome div. The default is Welcome to Moon. Great to have you here. Replace it with your product name and a personalised greeting that matches your product voice.
Use this AI coding template for
- ·Voice AI and call centre SaaS landing pages where showing a live analytics panel communicates real-time capability
- ·AI agent and automation product heroes that need a dark technical layout with a data visualisation preview
- ·Business communication and call analytics product pages where chart bars represent call volume, qualification rate, or booking rate