CodeShot: zrzuty ekranu kodu z efektami 3D

CodeShot: narzędzie internetowe do tworzenia stylizowanych zrzutów kodu

CodeShot — otwarte narzędzie webowe do renderowania kodu i tekstu w formie atrakcyjnych obrazów z zaawansowanymi opcjami transformacji. Działa wyłącznie w przeglądarce, wykorzystując Canvas API i przechowuje ustawienia w localStorage. Stworzone przy użyciu LLM (Claude), obejmuje ograniczenia istniejących rozwiązań typu Carbon lub płatnych alternatyw.

Narzędzie obsługuje kod z podświetleniem składni oraz dowolny tekst. Kluczowe różnice: efekty 3D (nachylenie, obrót, perspektywa), niestandardowe rozmycia, filtry, cienie oraz wyróżnianie fragmentów z indywidualnym kolorem.

Podstawowe możliwości dostosowania

Narzędzie oferuje szczegółowy kontrolę nad parametrami wizualnymi. Pełna lista funkcji:

• Obsługa treści: kod (z motywami podświetlania) lub zwykły tekst (standardowe czcionki).
• Typografia: rozmiar czcionki, interlinia, wyrównanie tekstu.
• Okno i marginesy: styl ramki (efekt okienka), padding, border-radius, numeracja linii.
• Tło i przezroczystość: gradienty, kolory stałe, przezroczystość okna.
• Transformacje: obrót, nachylenie 3D (pionowe/poziome), perspektywa (ściąganie krawędzi).
• Efekty: rozmycie (kierunkowe, intensywność), cienie, źródła światła.
• Filtry: styl Instagram (ciepły, chłodny itd.) z regulacją siły.
• Wyróżnianie: kolor i przezroczystość dla wybranych fragmentów tekstu.
• Eksport: bezpośredni pobranie PNG/SVG bezpośrednio z przeglądarki.

Wszystkie zmiany są trwałe dzięki localStorage, co upraszcza iteracje.

Realizacja techniczna

Projekt zbudowany jest na vanilla JavaScript + Canvas2D. LLM wygenerował podstawowy render, około 1000 linii, następnie dopracowany ręcznie w VS Code z pomocą Copilot.

Kluczowe wyzwania:

• Perspektywa 3D: niestandardowa macierz projekcji do nachylenia i ściągania (skalowanie każdej krawędzi).
• Podświetlanie składni: podobny do Prism.js, z motywami.
• Filtry: emulacja CSS filter() poprzez manipulację pikselami (kombinacje do rozmycia).
• Wydajność: offscreen canvas do podglądu, throttling podczas zmiany rozmiaru.

Kod nie został zoptymalizowany pod czytanie — skupiono się na funkcjonalności. Repozytorium publiczne, wszystkie PRs mile widziane.

Przykład transformacji: nachylenie 40° w górę i w lewo, głębokość 30°, filtr ciepły + fade w prawo. Wynik przewyższa DALL-E/Stable Diffusion pod względem precyzji renderowania tekstu.

Porównanie z alternatywami

| Narzędzie | Nachylenie 3D | Niestandardowe rozmycie | Filtry | Kolor podświetlenia | Bezpłatne |

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

| Carbon | Nie | Nie | Podstawowe | Nie | Tak |

| Ray.so | Nie | Nie | Tak | Nie | Płatne |

| CodeShot | Tak | Tak | Tak | Tak | Tak |

CodeShot wygrywa w kustomizacji bez subskrypcji. Wada: tylko klient-side, brak renderowania po stronie serwera.

Dla deweloperów średniozaawansowanych: wewnętrznie — transformacje macierzowe (afiniczne + perspektywa), fragment shaders poprzez kompozycję canvas. Skaluje się do 4K bez opóźnień nawet na GPU średniego poziomu.

Co warto wiedzieć

• Całkowita obróbka po stronie klienta: zero backendu, natychmiastowe podglądy.
• Zaawansowana geometria 3D: nachylenie/perspektywa bez WebGL.
• Trwałość ustawień + udostępnialne linki (poprzez parametry zapytania).
• Open-source: repozytorium GitHub do forkowania i rozwijania.
• Obsługa LLM: Claude wygenerował 80% kodu w 3 iteracjach.

— Editorial Team