CodeShot: Una Herramienta Web para Capturas de Código Estilizadas
CodeShot es un servicio web de código abierto que convierte código y texto en imágenes visualmente impactantes con controles avanzados de transformación. Funciona completamente en tu navegador, utilizando la API Canvas y almacenando ajustes en localStorage. Desarrollado con la ayuda de LLM (Claude), supera las limitaciones de herramientas como Carbon o alternativas de pago.
La herramienta admite código con resaltado de sintaxis y texto plano. Sus funciones clave incluyen efectos 3D (inclinación, rotación, perspectiva), desenfoques personalizados, filtros, sombras y resaltado selectivo con colores individuales.
Características Principales de Personalización
Ofrece un control granular sobre los elementos visuales. Lista completa de funciones:
- Soporte de Contenido: Código (con temas de sintaxis) o texto plano (fuentes estándar).
- Tipografía: Tamaño de fuente, interlineado, alineación del texto.
- Ventana y Espaciado: Estilo de marco tipo ventana, relleno, radio de borde y números de línea.
- Fondo y Transparencia: Gradientes, colores sólidos, opacidad de ventana.
- Transformaciones: Rotación, inclinación 3D (vertical/horizontal), perspectiva (compresión de bordes).
- Efectos: Desenfoque (direccional, intensidad), sombras, fuentes de luz.
- Filtros: Estilo Instagram (cálido, frío, etc.) con intensidad ajustable.
- Resaltado: Color y opacidad para rangos de texto seleccionados.
- Exportación: Descarga directa de PNG/SVG desde el navegador.
Todos los cambios se mantienen mediante localStorage, lo que hace que la iteración sea rápida y fluida.
Implementación Técnica
Construido con JavaScript puro + Canvas2D. El renderizador inicial (~1.000 líneas) fue generado por un LLM y posteriormente refinado manualmente en VS Code con soporte de Copilot.
Desafíos clave abordados:
- Perspectiva 3D: Matriz de proyección personalizada para inclinación y escalado de bordes.
- Resaltado de Sintaxis: Resaltador inspirado en Prism.js con soporte de temas.
- Filtros: Emulación de filter() de CSS mediante manipulación de píxeles (convoluciones para desenfoque).
- Rendimiento: Canvas fuera de pantalla para vistas previas, throttling de redimensionamiento.
El código no está optimizado para legibilidad—la funcionalidad va primero. El repositorio público acepta contribuciones.
Ejemplo de transformación: inclinación superior izquierda de 40°, profundidad de 30°, filtro cálido + desvanecimiento derecho. El resultado supera a DALL-E/Stable Diffusion en precisión de renderizado de texto.
Comparación con Alternativas
| Herramienta | Inclinación 3D | Desenfoque Personalizado | Filtros | Color de Resaltado | Gratis |
|-------------|----------------|--------------------------|--------|--------------------|--------|
| Carbon | No | No | Básico | No | Sí |
| Ray.so | No | No | Sí | No | Pago |
| CodeShot | Sí | Sí | Sí | Sí | Sí |
CodeShot lidera en personalización sin requerir suscripción. Desventaja: solo cliente—sin renderizado en servidor.
Para desarrolladores senior: bajo el capó—transformaciones matriciales (afín + perspectiva), shaders de fragmentos mediante composición canvas. Escala sin problemas hasta 4K en GPUs de gama media.
¿Por Qué Importa?
- Procesamiento completamente del lado del cliente: sin backend, vistas previas instantáneas.
- Geometría 3D avanzada: inclinación/perspectiva sin WebGL.
- Persistencia de ajustes + URLs compartibles (vía parámetros de consulta).
- De código abierto: repositorio en GitHub para forks e mejoras.
- Asistido por LLM: Claude generó ~80% del código en solo 3 iteraciones.
— Editorial Team
Aún no hay comentarios.