Guía · Jorge Cabrera
Stack moderno web
Una selección de herramientas para construir aplicaciones web visualmente atractivas, interactivas y de alto rendimiento.
Para empezar:
- React
- Tailwind
- shadcn/ui
- Framer Motion
- Three.js
1 de 5
Frameworks de estructura
Organizan toda la aplicación (arquitectura, componentes, navegación y estado). Son la base de las SPA y PWA modernas.
- ReactComponentes reutilizables, DOM virtual y un ecosistema enorme. Lo usan Facebook, Netflix, Instagram y Airbnb. (se abre en otra pestaña)
- React: ejemplos (se abre en otra pestaña)
- Vue.jsMuy fácil de aprender, rápido y flexible. Lo usan Alibaba y Xiaomi. (se abre en otra pestaña)
- Vue.js: ejemplos (se abre en otra pestaña)
- AngularFramework completo con arquitectura robusta y herramientas integradas, ideal para sistemas administrativos. (se abre en otra pestaña)
- Angular: ejemplos (se abre en otra pestaña)
2 de 5
Diseño visual y componentes
Ayudan a crear interfaces modernas, atractivas y consistentes sin escribir CSS desde cero.
- Tailwind CSSFramework de utilidades para diseño rápido y a medida, responsive de forma nativa. (se abre en otra pestaña)
- shadcn/uiComponentes copiables con un diseño muy limpio, muy usados en paneles y SaaS. (se abre en otra pestaña)
- shadcn/ui: ejemplos (se abre en otra pestaña)
- Material UILibrería basada en Material Design de Google, para apps empresariales y formularios complejos. (se abre en otra pestaña)
3 de 5
Animaciones e interfaces
Dan vida a la interfaz con movimientos fluidos, transiciones y efectos visuales.
- GSAPAnimaciones complejas y scroll interactivo (estilo Apple). Este sitio lo usa. (se abre en otra pestaña)
- Framer MotionMicrointeracciones y transiciones fluidas en React. (se abre en otra pestaña)
- React SpringAnimaciones basadas en física, con efectos muy naturales. (se abre en otra pestaña)
- LottieAnimaciones exportadas desde herramientas de diseño. (se abre en otra pestaña)
- Anime.jsEfectos complejos sobre SVG y elementos de la página. (se abre en otra pestaña)
4 de 5
Gráficos, 3D y juegos
Para simulaciones, mundos virtuales y videojuegos que corren directo en el navegador.
- Three.jsLa librería estándar para gráficos 3D en el navegador. (se abre en otra pestaña)
- PixiJSMotor gráfico 2D ultrarrápido para animaciones intensivas. (se abre en otra pestaña)
- Particles.jsFondos con efectos de partículas interactivas. (se abre en otra pestaña)
- PhaserFramework líder para videojuegos HTML5 en 2D, educativos o multijugador. (se abre en otra pestaña)
5 de 5
Mapas y localización
Para apps con ubicación y mapas.
Inspiración
Aplicaciones web que parecen apps
Ejemplos de lo que se puede construir con estas herramientas. Todas funcionan en el navegador.
- PhotopeaEditor de imágenes profesional, tipo Photoshop, que funciona completamente en el navegador. (se abre en otra pestaña)
- FigmaDiseño de interfaces y prototipos con colaboración en tiempo real. (se abre en otra pestaña)
- SquooshCompresor de imágenes de Google Chrome Labs: todo el proceso ocurre en tu dispositivo. (se abre en otra pestaña)
- ExcalidrawPizarra colaborativa para diagramas y lluvias de ideas. (se abre en otra pestaña)
- HoppscotchCliente de código abierto para probar APIs, similar a Postman. (se abre en otra pestaña)
- PhotoStackGalería con animaciones 3D muy fluidas. (se abre en otra pestaña)
- WebGL Fluid SimulationSimulación física de fluidos en tiempo real. (se abre en otra pestaña)
- Figma CommunityInterfaces modernas de diseñadores profesionales, para inspirarse. (se abre en otra pestaña)
- 2048El clásico juego, como PWA rápida y fluida. (se abre en otra pestaña)
- NASA EyesSimulación espacial interactiva oficial de la NASA. (se abre en otra pestaña)