From ab605d49b3bfa5e8425d9eec5330a6163481f46a Mon Sep 17 00:00:00 2001 From: Luis Castro Date: Fri, 14 Aug 2026 10:03:36 -0400 Subject: [PATCH] feat(docs): header-only feature cards, Angular mark in the SVG demo The home feature cards drop their body copy: the headers stand alone, scale-in with a back ease instead of fading up. The SVG example now starts on the Angular mark (asset in apps/docs/public, path rescaled into the demo viewBox) and morphs through the other shapes. Co-Authored-By: Claude Fable 5 --- apps/docs/public/angular-icon.svg | 1 + apps/docs/src/app/pages/(home).page.ts | 98 ++++++++------------------ apps/docs/src/app/pages/svg.page.ts | 13 ++-- 3 files changed, 39 insertions(+), 73 deletions(-) create mode 100644 apps/docs/public/angular-icon.svg 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.featTitle }}

{{ c.featNote }}

-