Frèsia

Technical Details

As with all my projects, performance and SEO were top priorities. The landing page achieves a Lighthouse performance score of 99+, with a First Contentful Paint (FCP) under 0.3 seconds, thanks to Astro’s static site generation and optimized asset handling.

Advanced Animations

• GSAP-powered interactions: Smooth, hardware-accelerated animations with ScrollTrigger for scroll-based reveals
• Letter-by-letter text reveal: Custom typography animations with staggered delays
• Transform-based animations: Zero layout thrashing for 60fps performance
• Dynamic import strategy: Code-split animation libraries for optimal bundle size

Interactive 3D Scene

• React Three Fiber integration: Real-time 3D gift card with physics simulation
• Rapier physics engine: Realistic rope/band dynamics with joint constraints
• Custom shader materials: MeshLine implementation for textured band rendering
• Responsive 3D positioning: Viewport-aware camera and object placement

Progressive Image Loading

• LQIP (Low-Quality Image Placeholder): Blur-up technique for perceived performance
• Custom Astro component: Reusable ProgressiveImage with load state management
• Optimized assets: Astro’s built-in image optimization with WebP support
• CLS prevention: Reserved layout space to avoid content shifts

Carousel Implementation

• GSAP Timeline animations: Smooth slide transitions with custom easing
• Multi-input navigation: Keyboard, mouse, touch swipe support
• Autoplay with pause-on-hover: UX-optimized auto-advance
• Accessible markup: ARIA labels and semantic HTML

Internationalization Ready

• Structured i18n: Extracted copy strings to src/locales/es.json
• Scalable architecture: Foundation for multi-language support
• Context-based keys: Organized translations by section and purpose

Performance Optimizations

• Static Site Generation: Pre-rendered pages with Astro’s zero-JS default
• Islands Architecture: Selective hydration for interactive components
• Dynamic imports: Lazy-loaded libraries (GSAP, Three.js) on demand
• Minimal JavaScript: ~95% static HTML/CSS, JS only where needed

Tech Stack

Core Framework

• Astro 5.14 - Modern static site generator with partial hydration
• React 19 - UI components for interactive islands
• TypeScript - Type-safe development

Styling

• Tailwind CSS 4.1 - Utility-first CSS framework
• Custom CSS animations - Hand-crafted keyframes for precise control

Animation & 3D

• GSAP 3.13 - Professional-grade animation library
• ScrollTrigger - Scroll-linked animations
• SplitText - Advanced text manipulation
• React Three Fiber 9.4 - Declarative Three.js in React
• Three.js 0.181 - WebGL 3D graphics
• Rapier 2.2 - Physics simulation
• Drei 10.7 - R3F helper utilities
• MeshLine 3.3 - Custom line rendering

Development Tools

• Vite - Lightning-fast dev server and build tool
• Sharp - High-performance image processing

Project Structure

fresia/
├── src/
│   ├── app/
│   │   ├── layouts/
│   │   │   └── base-layout.astro      # Main layout with nav and footer
│   │   └── styles/
│   │       └── global.css              # Global styles and variables
│   ├── assets/
│   │   └── images/                     # Optimized image assets
│   ├── components/
│   │   └── ProgressiveImage.astro      # Reusable LQIP component
│   ├── sections/
│   │   ├── hero/
│   │   │   ├── Hero.astro              # Hero section with image carousel
│   │   │   └── title.astro             # Animated heading with SplitText
│   │   ├── products/
│   │   │   ├── Products.astro          # Product list wrapper
│   │   │   └── Product.astro           # Scroll-reveal product cards
│   │   ├── storytelling/
│   │   │   ├── Storytelling.astro      # Brand narrative section
│   │   │   └── AppearingText.astro     # Scroll-triggered text reveal
│   │   ├── cuidar-poinsettia/
│   │   │   └── CuidarPoinsettia.astro  # GSAP carousel for care tips
│   │   ├── gift-card/
│   │   │   ├── GiftCard.astro          # Section wrapper
│   │   │   └── vercel-card.jsx         # 3D physics card (React)
│   │   ├── main-product/
│   │   │   └── MainProduct.astro       # Featured product hero
│   │   └── footer/
│   │       └── Footer.astro            # Site footer with contact
│   ├── shared/
│   │   └── ui/
│   │       └── morphing-text.tsx       # Animated text morphing component
│   ├── locales/
│   │   └── es.json                     # Spanish translations
│   └── pages/
│       └── index.astro                 # Main landing page
├── public/
│   ├── fonts/                          # Web fonts
│   └── media/                          # Static media assets
├── astro.config.mjs                    # Astro configuration
├── tailwind.config.js                  # Tailwind configuration
├── tsconfig.json                       # TypeScript configuration
└── package.json                        # Dependencies and scripts

Technical Highlights

1. Performance-First Architecture

• Lighthouse Score: 95+ across all metrics
• Zero CLS: Progressive image loading with reserved space
• Optimized animations: Transform/opacity-only (compositor-friendly)
• Code splitting: Dynamic imports reduce initial bundle by ~40%

2. Advanced GSAP Integration

// Dynamic import pattern for optimal loading
const { gsap } = await import('gsap');
const ScrollTrigger = (await import('gsap/ScrollTrigger')).default;

// Transform-based animations (no layout thrashing)
gsap.fromTo(img, 
  { yPercent: 6, scale: 1.06, opacity: 0 },
  { 
    yPercent: -6, 
    scale: 1, 
    opacity: 1,
    scrollTrigger: { trigger, scrub: 0.6 }
  }
);

3. 3D Physics Simulation

// React Three Fiber with Rapier physics
<RigidBody type="fixed" ref={fixed}>
  <useRopeJoint bodyA={fixed} bodyB={card} 
    length={2} maxMultiplier={3} />
</RigidBody>

4. Progressive Enhancement Pattern

<!-- Astro component with progressive image loading -->
<ProgressiveImage 
  src={foto.src} 
  alt={foto.alt}
  lqip={foto.lqip}
  placeholderColor="#f0f0f0"
  ratio="16/9"
/>

5. Accessible Carousel

// Multi-input accessible carousel
indicators.forEach((dot) => {
  dot.addEventListener('click', () => goTo(idx, dir));
});
window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') prev();
  if (e.key === 'ArrowRight') next();
});
// + Touch swipe support

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/PolGubau/fresia.git
cd fresia

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Development URLs

• Dev server: http://localhost:4321
• Production build: dist/ folder

Project Stats

• Total Components: 12+ reusable Astro/React components
• Lines of Code: ~2,000 (excluding node_modules)
• Bundle Size: <150KB (gzipped, excluding images)
• Load Time: <1.5s (3G connection)
• Animation Frames: Consistent 60fps on modern devices
• Lighthouse Scores:
  • Performance: 95+
  • Accessibility: 98+
  • Best Practices: 100
  • SEO: 100

Design Patterns

• Islands Architecture: Selective hydration for optimal performance
• Progressive Enhancement: Core experience works without JavaScript
• Composition over Inheritance: Modular, reusable components
• Single Responsibility: Each component has one clear purpose
• DRY Principle: Extracted i18n strings, reusable image component