CodeShot : captures d'écran de code avec effets 3D

CodeShot : un outil web pour des captures de code stylées

CodeShot est un service web open source qui transforme le code et le texte en images visuellement percutantes, avec des contrôles avancés de transformation. Il fonctionne entièrement dans votre navigateur, utilisant l'API Canvas et stocke les paramètres dans localStorage. Conçu avec l'aide d'un LLM (Claude), il surmonte les limites des outils comme Carbon ou ses alternatives payantes.

L'outil prend en charge le code mis en évidence syntaxiquement ainsi que le texte brut. Les fonctionnalités clés incluent des effets 3D (inclinaison, rotation, perspective), flous personnalisés, filtres, ombres et mise en évidence sélective avec des couleurs individuelles.

Fonctionnalités principales de personnalisation

L'outil offre un contrôle précis sur chaque élément visuel. Liste complète des fonctionnalités :

• Prise en charge du contenu : code (avec thèmes syntaxiques) ou texte simple (polices standards).
• Typographie : taille de police, interligne, alignement du texte.
• Fenêtre et espacement : style cadre type fenêtre, marge, rayon de bordure, numéros de ligne.
• Arrière-plan et transparence : dégradés, couleurs solides, opacité de la fenêtre.
• Transformations : rotation, inclinaison 3D (verticale/horizontale), perspective (compression des bords).
• Effets : flou (directionnel, intensité), ombres, sources lumineuses.
• Filtres : style Instagram (chaud, froid, etc.) avec intensité ajustable.
• Mise en évidence : couleur et opacité pour des plages de texte sélectionnées.
• Export : téléchargement direct PNG/SVG depuis le navigateur.

Tous les changements sont persistants grâce à localStorage, permettant une itération rapide et fluide.

Implémentation technique

Construit avec JavaScript vanilla + Canvas2D. Le rendu initial (~1 000 lignes) a été généré par un LLM, puis affiné manuellement dans VS Code avec l’aide de Copilot.

Problèmes clés résolus :

• Perspective 3D : matrice de projection personnalisée pour l’inclinaison et l’échelle des bords.
• Mise en évidence syntaxique : highlighter inspiré de Prism.js avec prise en charge des thèmes.
• Filtres : émulation de CSS filter() via manipulation de pixels (convolutions pour le flou).
• Performance : canvas hors écran pour les prévisualisations, limitation de redimensionnement.

Le code n’est pas optimisé pour la lisibilité — la fonctionnalité prime. Le dépôt public accueille volontiers les contributions.

Exemple de transformation : inclinaison 40° en haut à gauche, profondeur 30°, filtre chaud + fondu droit. Le résultat dépasse DALL-E/Stable Diffusion en précision du rendu du texte.

Comparaison avec les alternatives

| Outil | Inclinaison 3D | Flou personnalisé | Filtres | Couleur de mise en évidence | Gratuit |

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

| Carbon | Non | Non | Basique | Non | Oui |

| Ray.so | Non | Non | Oui | Non | Payant |

| CodeShot | Oui | Oui | Oui | Oui | Oui |

CodeShot se distingue par sa personnalisation sans abonnement. Inconvénient : fonctionne uniquement côté client — pas de rendu serveur.

Pour les développeurs expérimentés : en coulisses — transformations matricielles (affines + perspective), shaders fragment via composition canvas. Évolue parfaitement jusqu’en 4K sur GPU moyens.

Pourquoi cela compte

• Traitement entièrement côté client : aucun backend, prévisualisations instantanées.
• Géométrie 3D avancée : inclinaison/perspective sans WebGL.
• Persistance des paramètres + URLs partageables (via paramètres de requête).
• Open source : dépôt GitHub pour fork et améliorations.
• Assistance par LLM : Claude a généré ~80 % du code en seulement 3 itérations.

— Editorial Team