Velocity Framework
Flagship web framework iterated from V5 to V9 since 2018. 24+ pages, 80+ components.
Velocity is the proprietary web framework that powers every Aidxn Design client project. Starting as a vanilla HTML/CSS/JS boilerplate in 2018, it has evolved through nine major versions into a fully-featured Astro + Tailwind + TypeScript system with 80+ reusable components, dark mode, responsive design, and performance scores consistently above 95 on Lighthouse. Each version has been battle-tested across dozens of production client sites.
Astro + Tailwind CSS + TypeScript
7 years of iteration, 80+ production-ready components.
A complete website framework that ships every client project faster, lighter, and more consistent than starting from scratch.
Framework Evolution
From vanilla JS to Astro — 9 major versions.
Velocity V5-V6 ran on vanilla HTML, CSS, and JavaScript with a custom build pipeline. V7 introduced Tailwind CSS and component-based architecture. V8 migrated to Astro with island architecture, enabling zero-JS pages by default with interactive components only where needed. V9 added TypeScript strict mode, view transitions, and an expanded component library covering pricing tables, blog systems, testimonial carousels, and multi-step forms. Each version improved build times, bundle size, and developer experience.
Component Architecture
80+ components, consistent design system, instant deployments.
The component library covers every common website pattern: hero sections with multiple layout variants, feature grids, pricing tables, testimonial displays, blog post cards, contact forms, navigation systems, and footer variants. Every component follows the same Tailwind class conventions, ensuring visual consistency across the entire site. The slot-based architecture allows content customization without touching component internals, making it possible to launch a complete client site in days rather than weeks. As a Gold Coast web design and development firm, I built Velocity to solve the repetition problem. Launching a new client website shouldn't mean starting from scratch. Velocity ships 80+ production-ready components tested across dozens of real client projects. Each component has been refined through real-world usage, addressing edge cases and usability issues that only emerge in production. The component library includes 12 different hero section layouts — some with side-by-side image and text, others with full-bleed background imagery, some with video backgrounds, others with animated gradients. This flexibility means nearly any design brief can be solved with an existing component, often with only content swaps required. Feature section components support 2, 3, 4, and 6-column layouts with optional icons, customizable color schemes, and alternate card styles. Pricing tables are particularly thorough. The framework includes components for simple tiered pricing, usage-based pricing, comparison tables, and negotiation-required "contact sales" layouts. Each supports unlimited columns and rows, custom highlight colors, and toggle switches between annual/monthly billing. Pricing components automatically calculate annual discounts and display savings amounts. Blog and content components handle post cards, author bios, related post recommendations, comment sections with moderation, and newsletter signup forms. The blog post card component smartly displays excerpt length based on available space, maintains consistent image aspect ratios, and shows reading time estimates. Related post recommendations use category and tag matching to suggest contextually relevant articles. Testimonial components support carousel layouts, grid layouts, and featured-quote styles. Each includes avatar images, names, titles, and companies. The carousel automatically loops with configurable transition speeds. Rating displays show star ratings with optional review counts. Contact forms and CTAs are critical for conversion. The framework includes basic contact forms, multi-step forms for complex workflows, newsletter signup forms, and demo request forms. All forms have built-in validation using HTML5 attributes plus optional Zod schemas for complex validation rules. Success states show confirmation messages without page reload. Error states highlight problematic fields with helpful error messages. Navigation systems support fixed, sticky, and static header layouts. Mobile navigation uses hamburger menus that animate smoothly. Megamenu support handles sites with complex site hierarchies. Breadcrumb components help users understand where they are in the site structure.
Performance is a core design constraint. Astro's static-first approach means pages ship zero JavaScript by default. Interactive elements use island architecture — only hydrating the components that need client-side behavior. Images use responsive srcsets with WebP/AVIF formats. The build pipeline outputs optimized static HTML that deploys to Netlify's edge network for sub-100ms TTFB globally. Lighthouse scores consistently hit 95+ across performance, accessibility, best practices, and SEO. The Velocity build system includes automated image optimization. All images are converted to modern formats (WebP for better compression, AVIF for maximum efficiency) with automatic fallback to original formats for older browsers. Responsive images use srcset to serve different resolutions based on device width. Critical images lazy-load to prioritize above-the-fold content. The entire optimization happens transparently in the build pipeline — developers just use images normally and the system handles the rest. Code splitting ensures only necessary JavaScript loads per page. A marketing homepage needs minimal interactivity, so ships with minimal JavaScript. An app dashboard needs rich interactions, so hydrates more components. This granular control means Velocity sites stay fast regardless of feature complexity. TypeScript strict mode catches errors at build time, not runtime. All components and utilities are fully typed, enabling IDE autocomplete and catching typos before deployment. Zod validation schemas serve double duty: they validate API responses and form input, and they generate TypeScript types automatically, ensuring forms and APIs stay in sync. Dark mode support is built-in. CSS custom properties (CSS variables) define color schemes that swap based on prefers-color-scheme. All components inherit dark mode support automatically. Users can manually toggle between light and dark modes, with preferences stored in localStorage. The Velocity codebase spans 24 pages and 80+ components, available via a private npm package. Each new client project starts by installing the package, then adding only custom components needed for that specific project. This keeps client codebases clean and focused while benefiting from battle-tested Velocity components. Deployment to Netlify is automatic. The framework includes a netlify.toml configuration with optimal cache settings and redirect rules. Every git push triggers a build and deployment. Preview deployments for pull requests let stakeholders review changes before merging. Documentation for Velocity is comprehensive. Component props are typed and documented. Usage examples show common patterns. CSS variable overrides show how to customize colors and spacing without touching component code. This lets junior developers and clients make changes confidently without needing to understand the internal component architecture.
Real-World Impact and ROI
Velocity-powered sites consistently deliver results.
A Gold Coast real estate website built on Velocity generates 30+ qualified leads monthly at a cost of less than $20 per lead through organic search and paid ads. A professional services website generates 5-10 quality inquiries weekly. A SaaS landing page converts 4% of traffic into free trial signups. These metrics vary by industry, but the pattern is consistent: Velocity's fast, conversion-optimized sites outperform slower competitors. The speed advantage directly impacts SEO rankings. Google uses Core Web Vitals (page speed metrics) as a ranking factor. Velocity sites with sub-1-second load times rank higher than competitor sites with 3-4 second load times. This compounds over time — better rankings drive more organic traffic without paid advertising cost. Accessibility compliance ensures no users are left behind. All components meet WCAG 2.1 AA standards. Keyboard navigation works perfectly. Color contrast ratios ensure readability for users with vision deficiencies. Screen reader support makes the site navigable for blind users. This isn't just ethical — it's also good for business. Accessible sites reach a broader audience, including elderly users and users with disabilities who have significant purchasing power. The mobile-first approach ensures the site works beautifully on the devices where most traffic comes from. Over 60% of web traffic is mobile, yet many websites still design for desktop first. Velocity's mobile-first components ensure excellent mobile experience, driving higher conversion rates from mobile visitors.
Security is built-in. Astro's static generation means there's no database to compromise, no user authentication to hack, no backend services to secure. Security vulnerabilities in CMS platforms or JavaScript frameworks become non-issues. Client sites using Velocity haven't had security breaches in the 7 years the framework has been production. Cost efficiency comes from both development speed and deployment simplicity. A new client site launches in 2-3 weeks instead of 2-3 months. Deployment to Netlify is automated via git push. No complex server administration, no DevOps overhead. This speed translates to lower development costs, which directly benefits clients. Version upgrades are straightforward. When a new Velocity version releases with security patches, performance improvements, or new components, clients can upgrade within hours. The same codebase remains compatible with minimal breaking changes, reducing upgrade costs. Velocity demonstrates that a well-architected framework compounds value over time. Every client project that uses Velocity improves the framework, refining components based on real-world usage. This creates a virtuous cycle where the framework gets better with each project, making future projects faster and better.
Want a site built on Velocity?
Let's connect.
From the blog
Latest thinking
Tech news, design insights, and development deep-dives from the Gold Coast.