The homepage hero in Astro Rocket has a large rocket icon sitting quietly in the background on desktop in dark mode. It is low-opacity, centered behind the content, and colored with the active brand color — so it adapts automatically when you switch themes. On mobile and in light mode it is not shown at all.
How it works
The rocket is a plain inline SVG rendered inside the Hero component. It is absolutely positioned to fill the hero section, centred both horizontally and vertically, and placed below all content with pointer-events-none so it never interferes with clicks or text selection.
The visibility is controlled entirely with Tailwind utility classes on the wrapper:
<div class="pointer-events-none absolute inset-0 hidden dark:lg:flex items-center justify-center">hidden— invisible by default on all screen sizesdark:lg:flex— only becomes visible when the dark mode class is active and the viewport is at thelgbreakpoint (1024 px) or wider
No JavaScript is involved. The element is always in the DOM but invisible in light mode and on small screens; the CSS does all the switching.
The SVG
The icon is the Lucide rocket, rendered with fill="none" and stroke="currentColor" so it inherits its color from the text color of its parent:
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="0.75"
stroke-linecap="round"
stroke-linejoin="round"
class="w-[min(55vw,420px)] h-[min(55vw,420px)] text-brand-500 opacity-[0.27]"
>
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
</svg>A few things worth noting:
stroke-width="0.75"— thinner than the default Lucide stroke. At 420 px the paths are large, so a thinner stroke keeps the icon from looking heavy.w-[min(55vw,420px)]— the icon scales with the viewport up to a maximum of 420 px. On a wide monitor it stays at 420 px; on a narrower desktop it scales down proportionally.opacity-[0.27]— low enough to read as background decoration, high enough to be clearly visible against the dark hero gradient beneath it.
Color follows the theme automatically
The SVG uses stroke="currentColor", which inherits from the text-brand-500 class on the element. brand-500 is a CSS custom property — not a fixed hex value. When the user switches from blue to violet, orange, or any of the other available themes, the property updates and the rocket stroke color updates with it. No extra code is needed. See How Astro Rocket’s Design System Works for a full walkthrough of every colour token.
The prop
The feature is controlled by a showRocketBg boolean prop on the Hero component. The default is false, so adding the prop enables it:
<Hero layout="centered" size="xl" showRocketBg showScrollIndicator ...>How to turn it off
Remove the showRocketBg prop from the <Hero> call in src/pages/index.astro:
<!-- Before -->
<Hero layout="centered" size="xl" class="hero-dark-gradient" showScrollIndicator showRocketBg descriptionClass="max-w-3xl">
<!-- After -->
<Hero layout="centered" size="xl" class="hero-dark-gradient" showScrollIndicator descriptionClass="max-w-3xl">One word removed, feature gone. No CSS to clean up, no variables to reset.
Why desktop and dark mode only
A large background icon competes with the hero text when the screen is narrow. On mobile the hero is already compact and the heading, description, and buttons need the full visual focus. At desktop widths there is enough breathing room for the rocket to sit behind the content without drawing the eye away from it.
Light mode was considered but the icon at 0.27 opacity on a light background reads more as clutter than atmosphere. The dark hero gradient — brand colour fading to black — gives the rocket exactly the right contrast to feel intentional. See Hero Gradient — Brand to Black, Dark Mode Only for how that gradient is set up.
Other hero features
The rocket background is one layer in a set of features that build up the homepage hero:
- Hero Gradient — Brand to Black, Dark Mode Only — the dark gradient underneath the rocket that makes it pop.
- Hero Scroll Indicator — two bouncing chevrons that appear after the hero animation and fade out the moment you scroll.
- Why Astro Rocket Uses sessionStorage for Dark Mode — how the dark mode choice is stored so the rocket appears on every page load without a flash.
- Getting Started with Astro Rocket — everything you need to go from install to a live site.