CodeShot: Code-Screenshots mit 3D-Effekten

CodeShot: Web-Tool für stylische Code-Screenshots

CodeShot ist ein Open-Source-Webtool, das Code und Text in visuell beeindruckende Bilder mit erweiterten Transformationsmöglichkeiten umwandelt. Es läuft komplett im Browser und nutzt die Canvas-API, wobei Einstellungen in localStorage gespeichert werden. Mit Unterstützung durch KI (Claude) überwindet es die Einschränkungen von Tools wie Carbon oder kostenpflichtigen Alternativen.

Das Tool unterstützt syntaxgefärbten Code sowie reinen Text. Zu den wichtigsten Funktionen gehören 3D-Effekte (Tilt, Rotation, Perspektive), benutzerdefinierte Blurs, Filter, Schatten und selektives Hervorheben mit individuellen Farben.

Kernfunktionen der Anpassung

Das Tool bietet feinste Steuerungsmöglichkeiten für visuelle Elemente. Vollständige Funktionsliste:

• Inhaltsunterstützung: Code (mit Syntax-Themen) oder reiner Text (Standard-Schriftarten).
• Typografie: Schriftgröße, Zeilenabstand, Textausrichtung.
• Fenster & Abstände: Fenster-artiger Rahmenstil, Padding, Border-Radius, Zeilennummern.
• Hintergrund & Transparenz: Gradienten, feste Farben, Fenster-Transparenz.
• Transformationen: Drehen, 3D-Tilt (vertikal/horizontal), Perspektive (Kantenkompression).
• Effekte: Blur (Richtungsabhängig, Intensität), Schatten, Lichtquellen.
• Filter: Instagram-Stil (warm, kühl usw.) mit anpassbarer Stärke.
• Hervorhebung: Farbe und Deckkraft für ausgewählte Textbereiche.
• Export: Direkter PNG/SVG-Download direkt aus dem Browser.

Alle Änderungen sind persistent durch localStorage, was schnelles und nahtloses Iterieren ermöglicht.

Technische Umsetzung

Gebaut mit vanilla JavaScript + Canvas2D. Der ursprüngliche Renderer (~1.000 Zeilen) wurde von einer KI generiert und später manuell in VS Code mit Copilot-Unterstützung verfeinert.

Behandelte Herausforderungen:

• 3D-Perspektive: Eigenes Projektionsmatrix für Tilt und Kantenverzerrung.
• Syntax-Highlighting: Prism.js-ähnlicher Highlighter mit Themenunterstützung.
• Filter: CSS filter() nachgeahmt via Pixel-Manipulation (Faltung für Blur).
• Leistung: Offscreen-Canvas für Vorschauen, Resize-Debouncing.

Der Code ist nicht optimiert auf Lesbarkeit – Funktionalität steht im Vordergrund. Das öffentliche Repository freut sich über Beiträge.

Beispieltransformation: 40° oben links Tilt, 30° Tiefe, warme Filter + rechter Verlauf. Das Ergebnis übertrifft DALL-E/Stable Diffusion bei der Textgenauigkeit.

Vergleich mit Alternativen

| Tool | 3D-Tilt | Benutzerdefinierter Blur | Filter | Hervorhebungsfarbe | Kostenlos |

|------|--------|--------------------------|--------|--------------------|-----------|

| Carbon | Nein | Nein | Grundlegend | Nein | Ja |

| Ray.so | Nein | Nein | Ja | Nein | Zahlungspflichtig |

| CodeShot | Ja | Ja | Ja | Ja | Ja |

CodeShot führt in der Anpassungsfreiheit ohne Abo. Nachteil: nur client-seitig – keine Server-Rendering-Option.

Für erfahrene Entwickler: Im Hintergrund – Matrix-Transformationen (affin + Perspektive), Fragment-Shaders via Canvas-Kompositionierung. Skaliert nahtlos bis 4K auf mittelklasse GPUs.

Warum es zählt

• Vollständig client-seitige Verarbeitung: Kein Backend, sofortige Vorschauen.
• Fortgeschrittene 3D-Geometrie: Tilt/Perspektive ohne WebGL.
• Einstellungsspeicherung + sharebare URLs (via Query-Parameter).
• Open-Source: GitHub-Repo für Forks und Verbesserungen.
• KI-gestützt: Claude generierte ~80 % des Codes in nur 3 Iterationen.

— Editorial Team