CodeShot: snímky kódu s 3D efekty

CodeShot: webový nástroj pro tvorbu stylizovaných snímků kódu

CodeShot je otevřený webový nástroj pro převod kódu a textu na atraktivní obrázky s pokročilými možnostmi úprav. Funguje výhradně ve prohlížeči, využívá Canvas API a ukládá nastavení do localStorage. Vytvořen s podporou LLM (Claude), obejde omezení existujících nástrojů jako je Carbon nebo placené alternativy.

Nástroj podporuje kód s barevným zvýrazněním syntaxe i libovolný text. Klíčové výhody: 3D efekty (naklonění, rotace, perspektiva), vlastní rozmazání, filtry, stínování a výběr fragmentů s individuálním barvám.

Hlavní možnosti nastavení

Nástroj nabízí jemnou kontrolu nad vizuálními parametry. Kompletní seznam funkcí:

• Podpora obsahu: kód (s tématy zvýraznění) nebo prostý text (standardní písma).
• Typografie: velikost písma, interlinie, zarovnání textu.
• Okno a okraje: styl rámu (podobný oknu), vnitřní okraj, zaoblení rohů, čísla řádků.
• Pozadí a průhlednost: gradienty, pevné barvy, průhlednost okna.
• Transformace: otáčení, 3D naklonění (svislé/horizontální), perspektiva (zúžení stran).
• Efekty: rozmazání (směrové, intenzita), stíny, světelné zdroje.
• Filtry: Instagramovské (teplé, chladné atd.) s možností upravit sílu.
• Výběr: barva a průhlednost vybraných textových úseků.
• Export: přímé stažení PNG/SVG přímo z prohlížeče.

Všechny změny jsou trvalé díky localStorage, což usnadňuje iteraci.

Technická realizace

Projekt je postaven na vanilla JavaScript + Canvas2D. Základní renderér (~1000 řádků) vygeneroval LLM, později ručně vylepšený v VS Code s pomocí Copilotu.

Klíčové výzvy:

• 3D perspektiva: vlastní matice projekce pro naklonění a zúžení (měřítko podle hrany).
• Zvýraznění syntaxe: podobný Prism.js highlighter s tématy.
• Filtry: emulace CSS filter() prostřednictvím manipulace pixelů (konvoluce pro rozmazání).
• Výkon: offscreen canvas pro náhledy, tlumení při změně velikosti.

Kód není optimalizován pro čtení – zaměření je na funkčnost. Repozitář je veřejný, vítány jsou PR.

Příklad transformace: naklonění 40° shora-vlevo, hloubka 30°, teplý filtr + pravé rozmazání. Výsledek přesahuje DALL-E/Stable Diffusion v přesnosti zobrazení textu.

Srovnání s alternativami

| Nástroj | 3D naklonění | Vlastní rozmazání | Filtry | Barva zvýraznění | Bezplatné |

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

| Carbon | Ne | Ne | Základní | Ne | Ano |

| Ray.so | Ne | Ne | Ano | Ne | Placené |

| CodeShot| Ano | Ano | Ano | Ano | Ano |

CodeShot vyhrává v přizpůsobitelnosti bez předplatného. Mínus: pouze klientská strana, žádný server-side render.

Pro senior vývojáře: pod kapotou – maticové transformace (afinní + perspektivní), fragment shaderů přes kompozici canvasu. Škálovatelné až do 4K bez zpoždění na mid-range GPU.

Co je důležité

• Úplná klientská zpracování: žádný backend, okamžité náhledy.
• Rozšířená 3D geometrie: naklonění/perspektiva bez WebGL.
• Trvalost nastavení + sdílené URL (pomocí parametrů dotazu).
• Open-source: repozitář na GitHubu pro fork a vylepšení.
• Podpora LLM: Claude vygeneroval 80 % kódu za 3 iterace.

— Editorial Team