Building Spark Slider: From AI Startup to Open Source

#typescript #react #webdev #opensource

Demo: spark-slider.vercel.app

GitHub: github.com/AshBuk/framer-motion-spark-slider

📦 NPM: @ashbuk/spark-slider

When I first shared Spark Slider with friends, the reaction was the same:

“Oh, another React slider.”

That’s not entirely wrong — but it’s not the full story either.

I originally built Spark Slider’s core while working at an AI startup. I wanted something minimal, fast, and visually fluid across laptops, phones, and kiosk screens — without the heavy abstractions of existing libraries like Swiper.

⚙️ What Makes It Different

Framer Motion animations — subtle blur, opacity, and depth transitions create natural focus.
Precision drag & swipe — smooth, momentum-free control.
Accessibility-first — full keyboard navigation and ARIA support.
Pure CSS — no Tailwind dependency, uses svh / svmin viewport units.
Lightweight core — ~12 KB gzipped, works with any React environment.

Under the Hood

The library follows a modular architecture with specialized hooks:

useSparkSlider — state & index logic
useSparkFullscreen — fullscreen mode
useSparkKeyboard — keyboard input
useSparkTransforms — dynamic transforms

All motion and interaction parameters are defined in a single source of truth:

config.ts.

Want to change how it feels? Tweak a few constants — and the slider’s behavior instantly adapts.

💡 A Thought on Open Source

It’s a valid takeaway — when a business model changes, it’s easy to just shelve the work and move on.
But making it open source gives that effort a second life — helping others build, learn, and create.

If this project resonates with you:

⭐ Star it on GitHub

🔗 Read the full deep dive on my AshBuk.hashnode.dev blog