Snow Code ❄️

Una extensión divertida de Visual Studio Code que agrega un hermoso efecto de nieve cayendo a tu editor. Perfecta para las temporadas invernales o simplemente para agregar un toque festivo a tu experiencia de programación.

Características

Snow Code ofrece dos modos diferentes para disfrutar del efecto de nieve:

1. ❄️ Snow Effect (Overlay)

Copos de nieve caen directamente sobre tu código mientras editas. Los copos aparecen como una capa superpuesta transparente que no interfiere con tu trabajo.

Características:

Copos de nieve animados simultáneamente (10-100 configurables, 30 por defecto)
No interfiere con la edición de código (pointer-events: none)
Tamaños, velocidades y opacidades configurables
7 variaciones de símbolos de copos
Actualización suave a 20 FPS

Uso:

Abre la Paleta de Comandos (Cmd+Shift+P / Ctrl+Shift+P)
Busca "Toggle Snow Effect (Overlay)"
Los copos empezarán a caer sobre tu editor

2. ❄️ Snow Panel (WebView)

Abre un panel separado con un efecto de nieve más intenso usando WebView. Ideal para tener en una segunda pantalla o simplemente para disfrutar del efecto en un panel dedicado.

Características:

Copos de nieve con animación CSS (20-150 configurables, 50 por defecto)
Fondo degradado suave
Panel independiente que puedes mover
Rotación de copos mientras caen
Tamaños, velocidades y opacidades configurables
Efecto de sombra brillante

Uso:

Abre la Paleta de Comandos (Cmd+Shift+P / Ctrl+Shift+P)
Busca "Toggle Snow Panel (WebView)"
Se abrirá un nuevo panel con el efecto

Comandos Disponibles

Comando	ID	Descripción
❄️ Toggle Snow Effect (Overlay)	`snow-code.toggleSnow`	Activa/desactiva copos de nieve sobre el editor
❄️ Toggle Snow Panel (WebView)	`snow-code.toggleSnowPanel`	Abre/cierra un panel con efecto de nieve

Requisitos

Visual Studio Code v1.105.0 o superior
Node.js 20.x (solo para desarrollo)

Instalación

Modo Desarrollo (Actual)

Clona o descarga este repositorio
Abre la carpeta en VS Code
Instala las dependencias:
```
npm install
```
Compila el proyecto:
```
npm run compile
```
Presiona F5 para abrir una ventana de desarrollo con la extensión activa

Desde VS Code Marketplace (Próximamente)

Busca "Snow Code" en la sección de extensiones de VS Code.

Uso Básico

Activar el Efecto Overlay

Cmd/Ctrl + Shift + P → "Toggle Snow Effect (Overlay)" → Enter

Los copos empezarán a caer sobre tu código. Ejecuta el comando nuevamente para desactivarlo.

Activar el Panel WebView

Cmd/Ctrl + Shift + P → "Toggle Snow Panel (WebView)" → Enter

Se abrirá un nuevo panel. Cierra el panel o ejecuta el comando nuevamente para detenerlo.

Atajos de Teclado (Opcional)

Puedes asignar atajos personalizados en Keyboard Shortcuts (Cmd+K Cmd+S / Ctrl+K Ctrl+S):

{
    "key": "ctrl+alt+s",
    "command": "snow-code.toggleSnow"
},
{
    "key": "ctrl+alt+shift+s",
    "command": "snow-code.toggleSnowPanel"
}

Configuración

Snow Code ahora incluye configuraciones personalizables para ambos modos (Overlay y WebView). Puedes acceder a ellas desde:

Archivo → Preferencias → Configuración y busca "Snow Code"

o edita tu settings.json:

Configuraciones del Overlay (Efecto sobre el código)

{
  // Número de copos de nieve (10-100)
  "snowCode.overlay.numberOfFlakes": 30,

  // Velocidad de caída: "slow", "normal", "fast"
  "snowCode.overlay.fallSpeed": "normal",

  // Tamaño de copos: "small", "medium", "large"
  "snowCode.overlay.flakeSize": "medium",

  // Opacidad de copos (20-100%)
  "snowCode.overlay.opacity": 80,

  // Auto-iniciar cuando VS Code se abre
  "snowCode.overlay.enabled": false,

  // Modo tormenta: 3x copos, velocidad rápida, mayor opacidad
  "snowCode.overlay.stormMode": false,

  // Efecto de viento: movimiento horizontal
  "snowCode.overlay.windEnabled": false,

  // Intensidad del viento (0-10): 1-3=brisa, 4-6=moderado, 7-10=fuerte
  "snowCode.overlay.windStrength": 3
}

Configuraciones del WebView (Panel separado)

{
  // Número de copos de nieve (20-150)
  "snowCode.webview.numberOfFlakes": 50,

  // Velocidad de caída: "slow", "normal", "fast"
  "snowCode.webview.fallSpeed": "normal",

  // Tamaño de copos: "small", "medium", "large"
  "snowCode.webview.flakeSize": "medium",

  // Opacidad de copos (20-100%)
  "snowCode.webview.opacity": 70,

  // Auto-abrir panel cuando VS Code se abre
  "snowCode.webview.enabled": false,

  // Modo tormenta: 3x copos, velocidad rápida, mayor opacidad
  "snowCode.webview.stormMode": false,

  // Efecto de viento: movimiento horizontal
  "snowCode.webview.windEnabled": false,

  // Intensidad del viento (0-10): 1-3=brisa, 4-6=moderado, 7-10=fuerte
  "snowCode.webview.windStrength": 3
}

Aplicación de Cambios

Los cambios de configuración detienen el efecto automáticamente:

Si el overlay está activo, se detiene al cambiar cualquier configuración
Si el panel WebView está abierto, se cierra al cambiar cualquier configuración
Debes reiniciar manualmente el efecto para aplicar los nuevos valores
Los cambios no requieren recargar VS Code

¿Por qué se detiene? Para evitar problemas al aplicar nuevos valores. Esto te permite ajustar múltiples configuraciones antes de reiniciar el efecto.

Ejemplos de Configuraciones

Experiencia minimalista:

{
  "snowCode.overlay.numberOfFlakes": 15,
  "snowCode.overlay.fallSpeed": "slow",
  "snowCode.overlay.flakeSize": "small",
  "snowCode.overlay.opacity": 40
}

Tormenta de nieve intensa (Modo Storm):

{
  "snowCode.overlay.stormMode": true,
  "snowCode.overlay.flakeSize": "large",
  "snowCode.webview.stormMode": true
}

Nota: El modo tormenta multiplica automáticamente el número de copos por 3, fuerza velocidad rápida y aumenta la opacidad en +20%. Esto sobreescribe las configuraciones de numberOfFlakes, fallSpeed y opacity.

Auto-inicio para ambiente festivo:

{
  "snowCode.overlay.enabled": true,
  "snowCode.webview.enabled": true
}

Configuraciones Avanzadas

Para opciones más avanzadas y parámetros planeados para futuras versiones (como colores personalizados, caracteres temáticos, efecto de viento, etc.), consulta la Documentación de Configuración Avanzada.

Compatibilidad

Plataformas

✅ Windows 10/11
✅ macOS 10.14+
✅ Linux (Ubuntu, Fedora, etc.)

Temas

Funciona con todos los temas de VS Code:

✅ Temas oscuros (mejor visibilidad)
✅ Temas claros
✅ Temas de alto contraste

Diferencias entre Overlay y WebView

Característica	Overlay	WebView
Ubicación	Sobre el código	Panel separado
Copos	10-100 (30 default)	20-150 (50 default)
Tecnología	Text Decorations	HTML/CSS/JS
Performance	Muy ligero	Ligero
Uso de CPU	Bajo	Muy bajo
Interfiere con código	No	No
Movible	No	Sí (panel)
Configurable	✅ Sí	✅ Sí

Recomendación: Usa Overlay para programar con nieve de fondo. Usa WebView para disfrutar del efecto en un panel dedicado.

Preguntas Frecuentes

¿Afecta el rendimiento?

No significativamente. Ambos modos están optimizados:

Overlay: 10-100 copos (configurable), 20 FPS, uso mínimo de memoria
WebView: 20-150 copos (configurable), animaciones CSS nativas, muy eficiente

💡 Tip: Si notas algún impacto, reduce el número de copos en la configuración.

¿Puedo usar ambos modos a la vez?

Sí, puedes tener el overlay activo y el panel abierto simultáneamente.

¿Interfiere con mi código?

No. Ambos modos usan pointer-events: none, lo que significa que los copos no bloquean clics, selección de texto ni ninguna otra interacción.

¿Funciona en todos los archivos?

El Overlay funciona en editores de texto (código, markdown, etc.). No funciona en terminales o paneles de configuración.

El WebView funciona independientemente del editor activo.

Problemas Conocidos

El overlay puede tener posicionamiento inconsistente en archivos muy largos
Los copos del overlay solo se muestran en el editor activo
El WebView consume un poco más de memoria que el overlay (despreciable)

Documentación

Documentación completa disponible en la carpeta documentation/:

Guía de Usuario - Tutorial completo
Arquitectura Técnica - Cómo funciona internamente
Referencia de API - Documentación de código

Desarrollo

Estructura del Proyecto

snow-code/
├── src/
│   └── extension.ts          # Código principal
├── out/                       # Código compilado
├── documentation/             # Documentación completa
├── package.json              # Configuración
└── tsconfig.json            # Config TypeScript

Scripts Disponibles

npm run compile        # Compilar TypeScript
npm run watch          # Compilar en modo watch
npm run lint           # Ejecutar ESLint
npm run test           # Ejecutar tests

Extensión de Funcionalidades

Revisa la Referencia de API para ejemplos de cómo:

Cambiar el número de copos
Agregar movimiento horizontal
Personalizar colores
Modificar velocidades

Roadmap

Características planeadas para futuras versiones:

[X] Configuración de usuario (número de copos, velocidad, tamaño, opacidad, auto-inicio)
[ ] Configuración de colores personalizados
[ ] Diferentes efectos estacionales (hojas, pétalos, estrellas)
[ ] Soporte para temas (adaptar colores automáticamente)
[X] Movimiento horizontal (efecto de viento configurable con intensidad)
[X] Modo "tormenta de nieve" intensa (3x copos, velocidad rápida, mayor opacidad)
[ ] Efectos de sonido opcionales
[X] Publicación en VS Code Marketplace

Contribuciones

Las contribuciones son bienvenidas. Si tienes ideas o encuentras bugs:

Crea un issue describiendo el problema o la funcionalidad
Fork el repositorio
Crea una rama con tu cambio
Envía un pull request

Licencia

Este proyecto es un proyecto educativo de demostración. Consulta el archivo LICENSE para más información.

Créditos

Creado como un proyecto educativo para aprender a desarrollar extensiones de VS Code.

Símbolos Unicode de copos de nieve:

❄ (U+2744) - Snowflake
❅ (U+2745) - Tight Trifoliate Snowflake
❆ (U+2746) - Heavy Chevron Snowflake
✻ (U+273B) - Teardrop-Spoked Asterisk
✼ (U+273C) - Open Centre Teardrop-Spoked Asterisk
❉ (U+2749) - Balloon-Spoked Asterisk
✺ (U+273A) - Sixteen Pointed Asterisk

Recursos

¡Feliz codificación nevada! ❄️

Si te gusta esta extensión, considera compartirla con otros desarrolladores.

snow code

Axolotl Software