Frèsia

Detalls Tècnics

Com en tots els meus projectes, el rendiment i el SEO van ser prioritats màximes. La pàgina d’aterratge aconsegueix una puntuació de rendiment de Lighthouse de 99+, amb un First Contentful Paint (FCP) inferior a 0,3 segons, gràcies a la generació de llocs estàtics d’Astro i a la gestió optimitzada dels actius.

Animacions avançades

• Interaccions impulsades per GSAP: Animacions suaus accelerades per maquinari amb ScrollTrigger per a revelacions basades en el desplaçament.
• Revelació de text lletra per lletra: Animacions tipogràfiques personalitzades amb retards escalonats.
• Animacions basades en transformacions: Zero “layout thrashing” per a un rendiment de 60 fps.
• Estratègia d’importació dinàmica: Biblioteques d’animació dividides per codi per a una mida de paquet òptima.

Escena 3D interactiva

• Integració de React Three Fiber: Targeta de regal 3D en temps real amb simulació de física.
• Motor de física Rapier: Dinàmica realista de cordes/bandes amb restriccions d’unió.
• Materials de shader personalitzats: Implementació de MeshLine per al renderitzat de bandes amb textura.
• Posicionament 3D adaptatiu: Càmera i col·locació d’objectes conscients del “viewport”.

Càrrega d’imatge progressiva

• LQIP (Low-Quality Image Placeholder): Tècnica de “blur-up” per a la percepció del rendiment.
• Component Astro personalitzat: ProgressiveImage reutilitzable amb gestió de l’estat de càrrega.
• Actius optimitzats: Optimització d’imatges integrada d’Astro amb suport per a WebP.
• Prevenció de CLS: Espai de disseny reservat per evitar canvis de contingut.

Implementació del carrussel

• Animacions de línia de temps GSAP: Transicions de diapositives suaus amb suavitzat personalitzat.
• Navegació amb múltiples entrades: Suport per a teclat, ratolí i lliscament tàctil.
• Reproducció automàtica amb pausa en passar el cursor: Avanç automàtic optimitzat per a l’UX.
• Marcatge accessible: Etiquetes ARIA i HTML semàntic.

Preparat per a la internacionalització

• i18n estructurat: Cadenes de text extretes a src/locales/es.json.
• Arquitectura escalable: Base per al suport multiidioma.
• Claus basades en el context: Traduccions organitzades per secció i propòsit.

Optimitzacions de rendiment

• Generació de llocs estàtics: Pàgines prerenneritzades amb el valor predeterminat d’Astro de zero-JS.
• Arquitectura d’illes: Hidratació selectiva per a components interactius.
• Importacions dinàmiques: Biblioteques carregades de forma mandrosa (GSAP, Three.js) sota demanda.
• JavaScript mínim: ~95% HTML/CSS estàtic, JS només on és necessari.

Piló tecnològic

Framework principal

• Astro 5.14 - Generador de llocs estàtics modern amb hidratació parcial.
• React 19 - Components de la IU per a illes interactives.
• TypeScript - Desenvolupament amb seguretat de tipus.

Estils

• Tailwind CSS 4.1 - Framework de CSS basat en utilitats.
• Animacions CSS personalitzades: “Keyframes” fets a mà per a un control precís.

Animació i 3D

• GSAP 3.13 - Biblioteca d’animació de grau professional.
• ScrollTrigger - Animacions vinculades al desplaçament.
• SplitText - Manipulació de text avançada.
• React Three Fiber 9.4 - Three.js declaratiu a React.
• Three.js 0.181 - Gràfics 3D WebGL.
• Rapier 2.2 - Simulació de física.
• Drei 10.7 - Utilitats d’ajuda per a R3F.
• MeshLine 3.3 - Renderitzat de línies personalitzat.

Eines de desenvolupament

• Vite - Servidor de desenvolupament i eina de construcció increïblement ràpid.
• Sharp - Processament d’imatges d’alt rendiment.

Estructura del projecte

fresia/
├── src/
│   ├── app/
│   │   ├── layouts/
│   │   │   └── base-layout.astro      # Disseny principal amb navegació i peu de pàgina
│   │   └── styles/
│   │       └── global.css              # Estils i variables globals
│   ├── assets/
│   │   └── images/                     # Actius d'imatge optimitzats
│   ├── components/
│   │   └── ProgressiveImage.astro      # Component LQIP reutilitzable
│   ├── sections/
│   │   ├── hero/
│   │   │   ├── Hero.astro              # Secció hero amb carrussel d'imatges
│   │   │   └── title.astro             # Encapçalament animat amb SplitText
│   │   ├── products/
│   │   │   ├── Products.astro          # Embolcall de la llista de productes
│   │   │   └── Product.astro           # Targetes de producte amb revelació en fer scroll
│   │   ├── storytelling/
│   │   │   ├── Storytelling.astro      # Secció de narrativa de marca
│   │   │   └── AppearingText.astro     # Revelació de text activada per scroll
│   │   ├── cuidar-poinsettia/
│   │   │   └── CuidarPoinsettia.astro  # Carrussel GSAP per a consells de cura
│   │   ├── gift-card/
│   │   │   ├── GiftCard.astro          # Embolcall de la secció
│   │   │   └── vercel-card.jsx         # Targeta física 3D (React)
│   │   ├── main-product/
│   │   │   └── MainProduct.astro       # Hero del producte destacat
│   │   └── footer/
│   │       └── Footer.astro            # Peu de pàgina amb contacte
│   ├── shared/
│   │   └── ui/
│   │       └── morphing-text.tsx       # Component de text animat morphing
│   ├── locales/
│   │   └── es.json                     # Traduccions al castellà
│   └── pages/
│       └── index.astro                 # Pàgina d'aterratge principal
├── public/
│   ├── fonts/                          # Fonts web
│   └── media/                          # Actius de mitjans estàtics
├── astro.config.mjs                    # Configuració d'Astro
├── tailwind.config.js                  # Configuració de Tailwind
├── tsconfig.json                       # Configuració de TypeScript
└── package.json                        # Dependències i scripts

Punts destacats tècnics

1. Arquitectura amb prioritat al rendiment

• Puntuació de Lighthouse: 95+ en totes les mètriques.
• Zero CLS: Càrrega d’imatge progressiva amb espai reservat.
• Animacions optimitzades: Només transformació/opacitat (compatibles amb el compositor).
• Divisió de codi: Les importacions dinàmiques redueixen el paquet inicial en un ~40%.

2. Integració avançada de GSAP

// Patró d'importació dinàmica per a una càrrega òptima
const { gsap } = await import('gsap');
const ScrollTrigger = (await import('gsap/ScrollTrigger')).default;

// Animacions basades en transformacions (sense layout thrashing)
gsap.fromTo(img,
  { yPercent: 6, scale: 1.06, opacity: 0 },
  {
    yPercent: -6,
    scale: 1,
    opacity: 1,
    scrollTrigger: { trigger, scrub: 0.6 }
  }
);

3. Simulació de física 3D

// React Three Fiber amb física Rapier
<RigidBody type="fixed" ref={fixed}>
  <useRopeJoint bodyA={fixed} bodyB={card}
    length={2} maxMultiplier={3} />
</RigidBody>

4. Patró de millora progressiva

<!-- Component Astro amb càrrega d'imatge progressiva -->
<ProgressiveImage
  src={foto.src}
  alt={foto.alt}
  lqip={foto.lqip}
  placeholderColor="#f0f0f0"
  ratio="16/9"
/>

5. Carrussel accessible

// Carrussel accessible amb múltiples entrades
indicators.forEach((dot) => {
  dot.addEventListener('click', () => goTo(idx, dir));
});
window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') prev();
  if (e.key === 'ArrowRight') next();
});
// + Suport per a lliscament tàctil

Primers passos

Requisits previs

• Node.js 18+
• pnpm (recomanat) o npm

Instal·lació

# Clonar el repositori
git clone https://github.com/PolGubau/fresia.git
cd fresia

# Instal·lar dependències
pnpm install

# Iniciar el servidor de desenvolupament
pnpm dev

# Construir per a producció
pnpm build

# Vista prèvia de la construcció de producció
pnpm preview

URLs de desenvolupament

• Servidor de desenvolupament: http://localhost:4321
• Construcció de producció: carpeta dist/

Estadístiques del projecte

• Total de components: 12+ components Astro/React reutilitzables.
• Línies de codi: ~2.000 (excloent node_modules).
• Mida del paquet: <150KB (gzipped, excloent imatges).
• Temps de càrrega: <1,5 s (connexió 3G).
• Quadres d’animació: 60 fps constants en dispositius moderns.
• Puntuacions de Lighthouse:
  • Rendiment: 95+
  • Accessibilitat: 98+
  • Bones pràctiques: 100
  • SEO: 100

Patrons de disseny

• Arquitectura d’illes: Hidratació selectiva per a un rendiment òptim.
• Millora progressiva: L’experiència principal funciona sense JavaScript.
• Composició sobre herència: Components modulars i reutilitzables.
• Responsabilitat única: Cada component té un propòsit clar.
• Principi DRY: Cadenes i18n extretes, component d’imatge reutilitzable.