Artisan Labs is a powerful Scrollytelling Sequence Optimizer that transforms videos into immersive scroll-driven experiences. Upload any video, extract frames, and map them to scroll positions using intelligent algorithms.
Artisan Labs bridges the gap between video content and modern web storytelling. It provides a visual interface for:
- Video Frame Extraction - Extract frames from any video with precise control
- Scroll Trigger Mapping - Intelligently map frames to scroll positions using 8 advanced algorithms
- Export - Generate developer-ready JSON or CSS configurations for your scrollytelling experience
| Use Case | Description |
|---|---|
| Marketing Campaigns | Create scroll-driven product reveals and brand stories |
| Editorial Content | Build immersive scrollytelling articles and features |
| Portfolios | Showcase creative work with cinematic scroll experiences |
| Education | Develop interactive learning modules with scroll-synced content |
| E-commerce | Design scroll-driven product demonstrations |
| Mode | Description | Best For |
|---|---|---|
| Linear | Even distribution across scroll | Uniform playback |
| Ease In | Slow start, fast end | Building anticipation |
| Ease Out | Fast start, slow end | Hero intros |
| Ease In-Out | S-curve acceleration | General purpose |
| Velocity | Concentrates at high-motion regions | Action videos |
| Scene | Scene-breakpoint distribution | Storyboarded content |
| Golden Ratio | Fibonacci-inspired spacing | Artistic storytelling |
| Step & Hold | Discrete frame holds | Presentations |
- JSON - Developer-ready configuration with frame mapping
- CSS - Scroll-timeline animation with fallbacks
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| UI Library | React 19 |
| Styling | Tailwind CSS 4 + shadcn/ui |
| Component Primitives | Radix UI |
| State Management | Zustand (with localStorage persistence) |
| Database | Prisma |
| Animation | Framer Motion, Lenis (smooth scroll) |
| Package Manager | Bun |
- Bun (recommended) or Node.js 18+
- Modern web browser (Chrome, Firefox, Safari, Edge)
# Clone the repository
git clone https://github.com/Dream-Pixels-Forge/artisan_labs_dev.git
cd artisan_labs_dev
# Install dependencies
bun install
# Set up the database
bun run db:push
# Start the development server
bun run devOpen http://localhost:3000 in your browser.
| Script | Description |
|---|---|
bun run dev |
Start development server on port 3000 |
bun run build |
Build the production application |
bun run start |
Start production server |
bun run lint |
Run ESLint |
bun run db:push |
Push Prisma schema to database |
bun run db:generate |
Generate Prisma client |
bun run db:migrate |
Run database migrations |
artisan_labs_dev/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API endpoints
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Main SPA entry
│ │
│ ├── components/
│ │ ├── layout/ # TopBar, Sidebar, BootSplash
│ │ ├── screens/ # Main application screens
│ │ │ ├── Dashboard.tsx # Landing with feature demos
│ │ │ ├── Sequencer.tsx # Video upload & frame extraction
│ │ │ ├── ScrollTriggerScreen.tsx # Trigger configuration
│ │ │ └── Archive.tsx # Saved sequences management
│ │ ├── scroll-trigger/ # Scroll trigger components
│ │ └── ui/ # shadcn/ui components
│ │
│ ├── lib/
│ │ ├── scroll-trigger.ts # Trigger calculation engine
│ │ ├── frame-extractor.ts # Video frame extraction
│ │ ├── db.ts # Database client
│ │ └── utils.ts # General utilities
│ │
│ ├── store/
│ │ └── app-store.ts # Zustand state management
│ │
│ ├── types/
│ │ └── index.ts # TypeScript definitions
│ │
│ └── hooks/ # Custom React hooks
│
├── prisma/ # Database schema
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── package.json # Dependencies
| Key | Screen | Purpose |
|---|---|---|
D |
Dashboard | Landing page with animated feature demos |
S |
Sequencer | Upload video & extract frames |
T |
Scroll Trigger | Configure trigger modes & preview |
A |
Archive | Manage saved sequences |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- Next.js - The React Framework
- shadcn/ui - Beautiful, accessible components
- Radix UI - Unstyled, accessible components
- Framer Motion - Animation library
- Lenis - Smooth scrolling
Built with ❤️ by Dream-Pixels-Forge