diff --git a/apps/docs/public/angular-icon.svg b/apps/docs/public/angular-icon.svg
new file mode 100644
index 0000000..9ceabf7
--- /dev/null
+++ b/apps/docs/public/angular-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/docs/src/app/pages/(home).page.ts b/apps/docs/src/app/pages/(home).page.ts
index 28df282..a02530e 100644
--- a/apps/docs/src/app/pages/(home).page.ts
+++ b/apps/docs/src/app/pages/(home).page.ts
@@ -35,34 +35,13 @@ const COPY = {
featNote:
"You could write all of this glue yourself. Most Angular apps that animate end up doing exactly that, one component at a time.",
features: [
- {
- title: 'Scoped by default',
- body: "Fifty instances of a component, each animating '.icon'? Each one only touches its own. Selectors stop at the host, just like component styles.",
- },
- {
- title: 'Signal-driven',
- body: 'Your signals already drive the template. Read one in the callback and it drives the animation too: change it and the animation replays against the freshly rendered DOM.',
- },
- {
- title: 'No cleanup needed',
- body: 'Leave the route and every tween, ScrollTrigger, and text split reverts, the same way Angular tears down the view. Forgetting cleanup stops being a bug you can write.',
- },
- {
- title: 'SSR ready',
- body: "No 'window is not defined' at build time, no isPlatformBrowser guards. Animation code waits until there's a browser.",
- },
- {
- title: 'Nothing new to learn',
- body: "You're writing GSAP, not a translation of it. Docs, forum answers, and CodePens work verbatim.",
- },
- {
- title: 'Tree-shakeable',
- body: 'Use two directives and the other ten leave your bundle. Plugins cost bytes only when you import them.',
- },
- {
- title: 'Zero change detection cost',
- body: "A tween at 60fps never schedules a change detection pass. GSAP's ticker does the work; no zone.js, no rxjs in the library.",
- },
+ 'Scoped by default',
+ 'Signal-driven',
+ 'No cleanup needed',
+ 'SSR ready',
+ 'Nothing new to learn',
+ 'Tree-shakeable',
+ 'Zero change detection cost',
],
},
es: {
@@ -83,34 +62,13 @@ const COPY = {
featNote:
'Todo este pegamento lo podrías escribir tú. La mayoría de las apps Angular que animan terminan haciendo justo eso, componente por componente.',
features: [
- {
- title: 'Scoped por defecto',
- body: "¿Cincuenta instancias de un componente, cada una animando '.icon'? Cada una toca solo el suyo. Los selectores se detienen en el host, igual que los estilos del componente.",
- },
- {
- title: 'Dirigido por signals',
- body: 'Tus signals ya dirigen el template. Lee uno en el callback y dirige también la animación: cámbialo y la animación se repite contra el DOM recién pintado.',
- },
- {
- title: 'Sin limpieza manual',
- body: 'Sal de la ruta y cada tween, ScrollTrigger y división de texto se revierte, igual que Angular desmonta la vista. Olvidar la limpieza deja de ser un bug posible.',
- },
- {
- title: 'Listo para SSR',
- body: "Sin 'window is not defined' al compilar, sin isPlatformBrowser. El código de animación espera a que haya navegador.",
- },
- {
- title: 'Nada nuevo que aprender',
- body: 'Escribes GSAP, no una traducción. Docs, respuestas de foros y CodePens funcionan tal cual.',
- },
- {
- title: 'Tree-shakeable',
- body: 'Usa dos directivas y las otras diez salen del bundle. Los plugins cuestan bytes solo cuando los importas.',
- },
- {
- title: 'Cero costo en change detection',
- body: 'Un tween a 60fps nunca agenda un pase de change detection. El ticker de GSAP hace el trabajo; sin zone.js, sin rxjs en la librería.',
- },
+ 'Scoped por defecto',
+ 'Dirigido por signals',
+ 'Sin limpieza manual',
+ 'Listo para SSR',
+ 'Nada nuevo que aprender',
+ 'Tree-shakeable',
+ 'Cero costo en change detection',
],
},
} as const;
@@ -180,11 +138,16 @@ const COPY = {
{{ c.featEyebrow }}
{{ c.featNote }}
-provideGsap.',
+ 'SVG is regular DOM to GSAP: strokes draw in with DrawSVG, shapes morph with MorphSVG, and elements ride paths with MotionPath. All three plugins are registered once in provideGsap. The floating shape starts as the Angular mark; Morph cycles it through the others.',
morph: 'Morph',
how: 'How this works',
explain: [
@@ -41,7 +46,7 @@ const COPY = {
eyebrow: 'Ejemplo · SVG',
title: 'Animación de SVG',
intro:
- 'Para GSAP el SVG es DOM normal: los trazos se dibujan con DrawSVG, las formas se transforman con MorphSVG y los elementos recorren rutas con MotionPath. Los tres plugins se registran una vez en provideGsap.',
+ 'Para GSAP el SVG es DOM normal: los trazos se dibujan con DrawSVG, las formas se transforman con MorphSVG y los elementos recorren rutas con MotionPath. Los tres plugins se registran una vez en provideGsap. La forma flotante empieza como el logo de Angular; Transformar la pasa por las demás.',
morph: 'Transformar',
how: 'Cómo funciona',
explain: [