CodeFlick

Generate animated GIFs and MP4 videos from code snippets with a typing effect.

Installation

1. Dépendances système

Ubuntu/Debian

sudo apt-get update
sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev \
  libjpeg-dev libgif-dev librsvg2-dev

Arch Linux (Omarchy, Manjaro, etc.)

sudo pacman -S base-devel cairo pango libjpeg-turbo giflib librsvg

macOS (Homebrew)

brew install pkg-config cairo pango libpng jpeg giflib librsvg

2. Cloner et compiler

git clone https://github.com/One-Up-Dev/codeflick.git ~/codeflick
cd ~/codeflick
bun install
bun run build

3. Installer Chromium pour Puppeteer

npx puppeteer browsers install chrome

4. Installer globalement

# Ajouter le bin path de bun au PATH (si pas déjà fait)
# Pour Bash :
echo 'export PATH="$PATH:$(bun pm bin -g)"' >> ~/.bashrc
source ~/.bashrc

# Pour Zsh :
echo 'export PATH="$PATH:$(bun pm bin -g)"' >> ~/.zshrc
source ~/.zshrc

# Créer le lien global
cd ~/codeflick
bun link

Alternative - utiliser un alias :

# Pour Bash :
echo 'alias codeflick="node ~/codeflick/dist/cli.js"' >> ~/.bashrc
source ~/.bashrc

# Pour Zsh :
echo 'alias codeflick="node ~/codeflick/dist/cli.js"' >> ~/.zshrc
source ~/.zshrc

5. Vérifier l'installation

codeflick --help

Usage

Commandes de base

# Générer un GIF depuis un fichier
codeflick generate --input fichier.ts

# Générer un MP4
codeflick generate --input fichier.ts --format mp4

# Extraire des lignes spécifiques (10 à 25)
codeflick generate --input fichier.ts --lines 10-25

# Spécifier le fichier de sortie
codeflick generate --input fichier.ts --output animation.gif

# Utiliser stdin
cat snippet.js | codeflick generate --lang javascript

Options complètes

codeflick generate [options]

Options:
  -i, --input <file>         Fichier source
  -l, --lines <range>        Plage de lignes (ex: "10-25" ou "10")
  -o, --output <file>        Fichier de sortie
  -f, --format <format>      Format: gif ou mp4 (défaut: gif)
  -t, --theme <theme>        Thème (défaut: dracula)
  --lang <language>          Langage pour la coloration syntaxique
  --typing-speed <ms>        Millisecondes par keyframe (défaut: 80)
  --font-size <px>           Taille de police (défaut: 14)
  --padding <px>             Padding autour du code (défaut: 32)
  --max-width <px>           Largeur maximale (défaut: 800)
  --background <color>       Couleur de fond personnalisée (hex)
  --window                   Ajouter le chrome de fenêtre (barre de titre)
  --window-title <title>     Titre de la fenêtre
  --window-controls <style>  Style des contrôles: macos ou windows (défaut: macos)
  --cursor                   Afficher un curseur clignotant
  --cursor-color <color>     Couleur du curseur (hex, ex: #f8f8f2)
  --cursor-blinks <count>    Nombre de clignotements à la fin (défaut: 3)
  --line-numbers             Afficher les numéros de ligne
  --line-numbers-color <color> Couleur des numéros de ligne (hex)

Thèmes disponibles

codeflick themes

• dracula - Thème violet foncé (défaut)
• monokai - Thème sombre classique
• github-dark - Thème GitHub mode sombre

Exemples

# TypeScript avec thème Monokai
codeflick generate -i src/index.ts -t monokai

# Python avec style personnalisé
codeflick generate -i script.py --font-size 16 --padding 48

# Extraire une fonction (lignes 50-75)
codeflick generate -i app.js -l 50-75 -o function-demo.gif

# Effet de frappe lent
codeflick generate -i code.rs --typing-speed 150

# MP4 pour meilleure qualité
codeflick generate -i main.go -f mp4 -o demo.mp4

# Avec fenêtre macOS (boutons rouge/jaune/vert)
codeflick generate -i app.tsx --window --window-title "app.tsx"

# Avec fenêtre style Windows
codeflick generate -i main.cs --window --window-controls windows

# Avec curseur clignotant
codeflick generate -i app.tsx --cursor

# Avec numéros de ligne
codeflick generate -i app.tsx --line-numbers

# Combo complet: fenêtre + curseur + numéros de ligne
codeflick generate -i app.tsx --window --window-title "app.tsx" --cursor --line-numbers

Intégration Zed

Crée le fichier ~/.config/zed/tasks.json :

[
  {
    "label": "CodeFlick: Generate GIF",
    "command": "codeflick",
    "args": ["generate", "--input", "$ZED_FILE", "--format", "gif"],
    "working_directory": "$ZED_WORKTREE_ROOT"
  },
  {
    "label": "CodeFlick: Generate MP4",
    "command": "codeflick",
    "args": ["generate", "--input", "$ZED_FILE", "--format", "mp4"],
    "working_directory": "$ZED_WORKTREE_ROOT"
  }
]

Utilisation : Cmd+Shift+P → "task" → sélectionner CodeFlick

Fichier de sortie

Par défaut, le fichier est créé dans le dossier courant avec le nom :

{nom-du-fichier}-{timestamp}.{gif|mp4}

Exemple : config-1706234567890.gif

SDK / API Programmatique

CodeFlick peut être utilisé comme bibliothèque dans vos projets Node.js.

Installation

bun add codeflick
# ou
npm install codeflick

Utilisation simple

import { createAnimation } from 'codeflick';
import { writeFileSync } from 'fs';

const code = `
function hello(name: string) {
  return \`Hello, \${name}!\`;
}
`;

const buffer = await createAnimation({
  code,
  language: 'typescript',
  format: 'gif',
  theme: 'dracula',
  cursor: true,  // curseur clignotant
});

writeFileSync('output.gif', buffer);

Utilisation avancée

import { generate, mergeSettings, cleanup } from 'codeflick';

const settings = mergeSettings({
  outputFormat: 'mp4',
  theme: 'monokai',
  typingSpeed: 100,
  fontSize: 16,
  padding: 48,
});

const result = await generate({
  code: 'console.log("Hello World");',
  language: 'javascript',
  settings,
  onProgress: (stage, current, total) => {
    console.log(`${stage} ${current ?? ''}/${total ?? ''}`);
  },
});

console.log(`Generated ${result.format}: ${result.frameCount} frames`);
writeFileSync(`output.${result.format}`, result.buffer);

// Nettoyer les ressources (Puppeteer, Shiki)
await cleanup();

Depuis un fichier

import { createAnimationFromFile } from 'codeflick';
import { readFileSync, writeFileSync } from 'fs';

const content = readFileSync('src/index.ts', 'utf-8');

const buffer = await createAnimationFromFile({
  content,
  filePath: 'src/index.ts', // utilisé pour détecter le langage
  format: 'gif',
  lines: { start: 10, end: 25 }, // optionnel
});

writeFileSync('demo.gif', buffer);

Types exportés

import type {
  CodeFlickSettings,
  GenerateOptions,
  GenerateResult,
  Keyframe,
} from 'codeflick';

Fonctions utilitaires

import {
  detectLanguage,      // Détecter le langage depuis l'extension
  extractLines,        // Extraire des lignes d'un texte
  calculateKeyframes,  // Calculer les keyframes
  estimateFrameCount,  // Estimer le nombre de frames
  highlightCode,       // Coloration syntaxique Shiki
} from 'codeflick';

Dépendances incluses

• Puppeteer → Chromium (téléchargé automatiquement)
• @ffmpeg-installer/ffmpeg → FFmpeg (inclus dans le package)
• Shiki → Coloration syntaxique

Développement

cd ~/codeflick
bun install
bun run build
bun run watch  # Mode développement

License

MIT