Better Flow /

Architecture

Better Flow consists of two separate codebases: the Landing Page (marketing + community site) and the Screenshot Studio (full canvas editor). This document covers the architecture of both.

Landing Page (web)

Overview

A Next.js 16 App Router site with no server components — every route and component uses "use client". The site serves as both a marketing landing page and a community hub.

Routing

      

        
          

            Route
            Description
          

        
        
          

              /
              Main landing page with responsive desktop/mobile variants
            

              /mobile
              Dedicated mobile route duplicating the landing page
            

              /community
              Community page with Manifesto, Contribution Flow, Open Source ethos, Activity, Integrations, CTA
            

              /docs
              Documentation (this site)

Component Architecture

app/
├── page.tsx               # Main landing
├── mobile/page.tsx        # Mobile route
├── community/page.tsx     # Community route
├── docs/                  # Documentation
├── components/
│   ├── community/         # Community page sections
│   ├── mobile/            # Mobile variants
│   ├── ui/                # ScrollStack, SpotlightCard, etc.
│   ├── Navbar.tsx         # Shared navigation
│   └── Footer.tsx         # Shared footer
├── sections/              # Landing page sections
└── hooks/                 # Custom hooks

Animation Architecture

      

        
          

            Library
            Purpose
          

        
        
          

              framer-motion
              UI entrances, hover effects, stagger children, whileInView triggers
            

              GSAP + ScrollTrigger
              Pinned scrolling sections, parallax, scrub-based animations
            

              Lenis
              Smooth scroll engine for the entire page

UI Component Patterns

  • Card Style: rgba(18, 15, 23, 0.45) background, backdropFilter: blur(32px) saturate(1.3), 1px solid rgba(255, 255, 255, 0.08) border
  • Typography: Dark theme with white text, secondary #a1a1aa, tertiary #71717a
  • Brand Colors: Orange #ff7e40, Pink #ff4b72, Purple #a445ff
  • Buttons: Glass-style with subtle borders, glow gradient buttons for primary CTAs

Community Page Sections

      

        
          

            Section
            Key Tech
          

        
        
          

              Hero
              Framer Motion, CSS gradients, Shapes3D
            

              Manifesto
              ScrollStack (React Bits), SpotlightCard
            

              OpenSource
              Framer Motion stagger, SpotlightCard
            

              Activity
              Framer Motion, SpotlightCard
            

              ContributionFlow
              SpotlightCard (mouse-tracking)
            

              Integrations
              Animated SVG, SpotlightCard
            

              CTA
              Aurora canvas, GSAP, Shapes3D

Screenshot Studio (better-flow)

Overview

A full browser-based screenshot editor using Next.js 16 with React 19. Canvas rendering via Konva, video export via FFmpeg WASM, state management via Zustand with undo/redo.

Canvas Rendering Architecture

The editor uses a dual rendering approach:

  • HTML/CSS Layer — Backgrounds, shadows, borders, text overlays, annotations (styled with Tailwind)
  • Konva Canvas Layer — Main image rendering, overlays, and 3D perspective transforms

State Management

Dual Zustand store pattern: useImageStore (image source, processing, upload, undo/redo via zundo) and useEditorStore (all editor settings — background, border, shadow, 3D, text, annotations).

Export Pipeline

4-stage compositing: HTML Render → Konva Render → Composite → Encode. Supports PNG/JPG for images, FFmpeg WASM / WebCodecs / MediaRecorder for video.

Animation System

  • 20+ presets in 5 categories (Fade, Slide, Scale, Rotate, Complex)
  • Timeline Editor with keyframe markers, playhead, ruler, and track controls
  • Interpolation engine supporting linear, ease, ease-in, ease-out, ease-in-out, and custom cubic beziers

See the Contributing guide for development setup and standards. Full changelog available here.

Previous Introduction Next Contributing