Serif hero with radial dot burst SVG animation on sand background
Serif hero template for voice AI and SaaS landing pages with a sand background, two-column layout, and a radial dot burst SVG animation built from coloured circles and fine radial lines. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A two-column hero section on a warm sand background. The left column holds a small eyebrow label, a large serif display headline at font-weight 400, a short descriptor paragraph, and a solid dark primary CTA button. The right column renders a radial dot burst entirely in SVG: 60 fine lines radiate from a central dark circle, and every sixth line ends in a coloured circle drawn in one of six brand colours. The central circle is filled dark and labelled. All SVG is generated via JavaScript at runtime so no image files are needed. The sand background colour is a neutral beige that pairs with both dark and coloured accents without competing with either. The serif typeface and dot burst graphic together give the hero a premium editorial quality suited to infrastructure, AI, and health technology products.
Common questions about this template
How do I change the dot burst colours?
Ask your vibe coding tool to update the cols array in the script block. The default six colours are blue, pink, green, amber, purple, and cyan. Replace any hex value with your brand colours and the SVG regenerates automatically.
How do I change the headline or background colour?
Ask Bolt, Claude Code, Replit, or Lovable to update the h1 text and the background value on html,body. The sand background is #D8D5CB. Replace it with any neutral or brand colour and the dark central circle and button will contrast against it.
How do I add a subheading or second CTA?
Ask your vibe coding tool to add a second p element after the existing .desc paragraph, and a second button after the .cta button. Add gap to the button group with display:flex and gap:10px to space both buttons correctly.
Use this AI coding template for
- ·Voice AI and SaaS landing pages that want a serif editorial hero with a technical data-driven graphic on the right
- ·Infrastructure and AI product pages that need a premium neutral background without photography
- ·Health technology and longevity product heroes where a data burst visual suggests measurement and precision