About EXPANDABLE SERVICES
Universal Service Card Component
Modular service tier system for agencies, studios, and creators. Pairs upfront pricing metrics with spring accordions that reveal full deliverables on hover or tap without layout shift.
Features
• 4-Side Laser Shimmer: Synchronized perimeter beams travel clockwise on hover.
• Spring Accordion: Deliverables expand smoothly via Animate Presence.
• Monospace Metrics: Tabular slots for rates, timelines, or SLA callouts.
• 3-Tier Icon Engine: Supports 12+ vector presets, image uploads, or raw inline SVG.
• Reactive Glow Shader: Backdrop radial blur dynamically matches active card accents.
• Tactile Hardware: Optional corner screws, circuit PCB grid, and pulsing status LED.
• Touch-Optimized: Switches from hover to tap-to-expand on touch devices.
• Responsive Grid: Fluid column reflow across desktop, tablet, and mobile.
Customization Options Configure everything in Framer’s properties sidebar without code:
• Grid & Density: 1–4 columns on desktop, 1–3 on tablet, plus background color.
• Hardware Toggles: Show/hide corner screws, PCB grid, and adjust glow blur/opacity.
• Color Tokens: Global accent fallback, per-card accents, and text colors.
• Card Content: Custom titles, summaries, paired metrics, CTA labels, and links.
• Sub-Services: Up to 4 expandable line items per card with details and badges.
How to Use
Paste: Copy into your project or duplicate via Remix link.
Layout: Place in an auto-layout stack (Width: Fill 100%, Height: Fit Content).
Customize: Edit copy, deliverables, and colors in Framer’s sidebar.
Publish: Test hover and tap states, then launch.
Use Cases
• Design Studios: Package design systems, UI/UX sprints, and retainer tiers.
• Web Developers: Showcase full-stack builds, APIs, and CMS migrations.
• Freelancers: Package fixed-scope sprints with upfront rates to qualify leads.
