Interactive React Pricing Component
A high-performance brutalist-glassmorphism style guide featuring a dark-mode palette (#0a0a0a), vibrant neon accents (cyan #00d9ff, pink #ff006e), and heavy editorial typography (Aspekta). This design system is optimized for creative technology portfolios, SaaS pricing pages, and fintech dashboards. It utilizes a bento grid layout for project showcases, 3D CSS transforms for interactive elements, and Framer Motion for staggered entrance animations. The aesthetic combines industrial brutalism (heavy borders, sharp typography) with futuristic glassmorphism (backdrop blurs, neon glows).
Summary
A creative developer portfolio and interactive pricing system utilizing high-contrast dark mode, neon gradients, and brutalist layouts with glassmorphism components.
Style
The style is defined by a deep black background (#0a0a0a) contrasted with sharp cyan (#00d9ff) and pink (#ff006e) accents. It uses the Aspekta variable font for a sophisticated technical feel, ranging from weight 900 for hero headers to weight 300 for body text. Key elements include 1px translucent borders, heavy backdrop blurs (24px), and cubic-bezier(0.4, 0, 0.2, 1) transition curves. Animation is central, featuring 3D rotations, floating keyframes, and staggered scroll-triggered reveals.
Layout & Structure
The layout follows a modular grid system. It transitions from a split-screen hero with a 3D focal point to a multi-column bento grid for content, followed by a three-tier pricing matrix and a functional split-form contact section.
Navigation
Hero Section
Bento Grid Portfolio
Interactive Pricing
Contact Form
Components
3D Interactive Cube
A purely CSS-driven 3D rotating cube used as a hero visual.
Neon Toggle Switch
A minimalist binary switch for monthly/annual pricing selection.
Glow Pricing Card
A glassmorphism card with a distinct outer neon glow for featured tiers.