Skip to content
ششبوك ونخيل
All Posts

Blog

Latest articles and updates

Featured Posts

astro-rocketgetting-startedconfigurationvercel

Getting Started with Astro Rocket — From Install to Live in Minutes

How to install, configure, and deploy Astro Rocket — covering site.config.ts, brand colours, navigation, writing posts, and deploying to Vercel.

MMohammed Beshr
1 دقيقة قراءة

All Posts

astro-rocketcomponentsuivelocity

57 Components Ready to Use — Astro Rocket's Full UI Library

Astro Rocket ships with 57 production-ready components from the Velocity library — buttons, cards, dialogs, forms, data display, and full page-structure components. All accessible, all themed.

HHans Martens
2 دقيقة قراءة
astro-rocketdark-modecssdesign

Dark Mode Hero Gradient — Brand Colour at the Top, Black at the Bottom

Astro Rocket's homepage hero fades from your active brand colour at the top to pure black at the bottom in dark mode. One prop on the Hero component, zero JavaScript, zero impact on light mode.

HHans Martens
2 دقيقة قراءة
astro-rocketfeaturesheaderux

Scroll Progress Bar — Reading Progress at a Glance

Astro Rocket now has a scroll progress bar: a thin brand-coloured line that fills as you scroll. Here's how it works, where it lives, and how to enable it on any page.

HHans Martens
2 دقيقة قراءة
astro-rocketanimationscomponentscustomization

Animations in Astro Rocket — Every Effect Explained

A complete breakdown of every animation built into Astro Rocket — page transitions, scroll-triggered counters, the reactive header, card hovers, and the full micro-animation library.

MMB
2 دقيقة قراءة
astro-rocketseostructured-datatutorial

SEO in Astro Rocket: What's Built In and How to Configure It

Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.

HHans Martens
2 دقيقة قراءة
astro-rocketdesign-systemtailwindcustomization

How Astro Rocket's Design System Works — Tokens, Colors, and Dark Mode

Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.

HHans Martens
2 دقيقة قراءة
astro-rocketcomponentscustomizationtutorial

The Hero Typing Effect in Astro Rocket — How It Works and How to Tune It

Astro Rocket's hero headline cycles through words with a typing animation. Learn how it works, how to tune every speed and pause, and how to disable it entirely.

HHans Martens
2 دقيقة قراءة
dark-modeastro-rocketdesigntutorial

Why Astro Rocket Uses sessionStorage for Dark Mode (Not localStorage)

Dark mode is the default experience in Astro Rocket — and that's a deliberate design decision. Here's the reasoning, the code, and exactly how to change it.

HHans Martens
2 دقيقة قراءة

Follow Us

Stay updated with new articles, ideas, and updates.

RSS FeedX / TwitterEmail