Show HN: Spark Slider – Lightweight React Carousel (12KB, TypeScript)

2 weeks ago 1

High-performance framework-agnostic React carousel slider powered by Framer Motion.

spark-slider-linkedin.mp4

spark-slider.vercel.app

Lightweight and fast React slider carousel powered by Framer Motion animations. Designed as a modern and highly optimized solution for large image datasets, it works seamlessly across laptops, tablets, and phones, with smooth support for both touch and mouse/keyboard input.

✦ For businesses and users

A robust slider suitable for galleries, installations, projections, events, or products that need precise, smooth interactions and an accessible UI.

Smooth drag-to-swipe with momentum-free, precise control
Click on center card to select (single tap on touch)
Auto-play with pause on interaction and hidden tab detection
Responsive layout using viewport units (svh/svmin)
Keyboard navigation (arrow keys)
Accessibility features with ARIA support
Performance: renders only visible cards, lazy loading for non-center images
Lightweight (~12KB gzipped core)
Framework-agnostic: works with Next.js, Vite, Create React App, Remix, Gatsby, and any React framework

Public demo: spark-slider.vercel.app You are viewing a hosted demo on Vercel. Images are randomized daily via picsum.photos (sourced from the Unsplash photographers collection). Uploading and managing your own images is disabled here. I am considering expanding the online service with private-cloud storage so users can manage their own images. // Private preview (if provided): uploads and deletes are enabled (images up to 5 MB; common image formats).

Packaged as an npm React library for easy reuse in apps
NPM Package: @ashbuk/spark-slider
Package documentation: packages/spark-slider/README.md

Installation

npm install @ashbuk/spark-slider # or yarn add @ashbuk/spark-slider # or pnpm add @ashbuk/spark-slider

Quick Start:

import SparkSlider from '@ashbuk/spark-slider'; import '@ashbuk/spark-slider/dist/spark-slider.css'; const images = ['/image1.jpg', '/image2.jpg', '/image3.jpg']; export default function App() { return <SparkSlider images={images} />; }

Start onboarding by reading:
DEVELOPMENT.md
CONTRIBUTING.md
Comments in the codebase are concise and serve as additional documentation.
The project adheres to SOLID and DRY principles.
The slider uses modern technologies with minimal dependencies (Next.js 15 App Router, React, Framer Motion, Tailwind CSS, CSS viewport units svh/svmin).
Performance: renders only visible cards, non-visible slides are not mounted, non-center images use loading="lazy". Scales to large image lists while keeping the DOM small.

📝 Original article: Read on my blog