I built this React carousel while working at an AI startup where we needed a lightweight slider for POS kiosks and tablets. Swiper (50KB+) was too heavy, so I created this minimal alternative with Framer Motion.
Key decisions:
• ~12KB gzipped (Framer Motion is peer dependency, adds ~40KB)
• Config-driven – all behavior in one file (config.ts)
• Framework-agnostic (Next.js, Vite, Remix, CRA, Gatsby, etc.)
• Pure CSS, no Tailwind dependency in the package
• Only renders visible cards for performance
Technical highlights:
- Custom hooks: useSparkSlider, useSparkKeyboard, useSparkTransforms, useSparkFullscreen
- TypeScript with strict typing
- ARIA support + keyboard navigation (arrows, Enter, Escape)
- Auto-play with pause on interaction and hidden tab detection
- Smooth drag-to-swipe with Framer Motion physics
The monorepo includes both a demo app (Next.js 15) and the NPM package.
AshBuk•3mo ago
I built this React carousel while working at an AI startup where we needed a lightweight slider for POS kiosks and tablets. Swiper (50KB+) was too heavy, so I created this minimal alternative with Framer Motion.
Key decisions: • ~12KB gzipped (Framer Motion is peer dependency, adds ~40KB) • Config-driven – all behavior in one file (config.ts) • Framework-agnostic (Next.js, Vite, Remix, CRA, Gatsby, etc.) • Pure CSS, no Tailwind dependency in the package • Only renders visible cards for performance
Technical highlights: - Custom hooks: useSparkSlider, useSparkKeyboard, useSparkTransforms, useSparkFullscreen - TypeScript with strict typing - ARIA support + keyboard navigation (arrows, Enter, Escape) - Auto-play with pause on interaction and hidden tab detection - Smooth drag-to-swipe with Framer Motion physics
The monorepo includes both a demo app (Next.js 15) and the NPM package.
Live demo: https://spark-slider.vercel.app/ NPM package: https://www.npmjs.com/package/@ashbuk/spark-slider Blog post: https://ashbuk.hashnode.dev/high-performance-framework-agnos...
Happy to answer questions about implementation, bundle optimization, or any trade-offs made!