PageContainer

The PageContainer component provides a centered layout with smooth fade-in animations, perfect for content-focused pages like articles, forms, and landing pages. It enforces an optimal reading width while maintaining elegant entrance transitions.

API Reference

Props

Layout Specifications

• Max Width: 600px (optimal for reading)
• Alignment: Centered with auto margins
• Min Height: 100vh (full viewport coverage)
• Animation: 700ms fade-in with slide-up effect

Design Philosophy

Optimal Reading Width

The 600px maximum width follows typography best practices for comfortable reading. This constraint:

• Prevents eye strain on wide screens
• Maintains focus on content
• Creates intimate, approachable layouts
• Works seamlessly across devices

Smooth Animations

The entrance animation provides professional polish:

• 700ms duration with ease-out timing
• Slide up from 1rem with opacity fade
• 100ms delay prevents content flash
• Respects user preferences for reduced motion

Usage Examples

Basic Implementation

<script>
import PageContainer from '$lib/shared/components/layout/PageContainer.svelte';
import { onMount } from 'svelte';

let mounted = false;

onMount(() => {
  mounted = true;
});
</script>

<PageContainer {mounted}>
  <h1>Welcome</h1>
  <p>Your content here...</p>
</PageContainer>

With Loading State

<script>
import PageContainer from '$lib/shared/components/layout/PageContainer.svelte';

let dataLoaded = false;

async function loadData() {
  // Fetch your data
  await fetchPageData();
  dataLoaded = true;
}
</script>

<PageContainer mounted={dataLoaded}>
  {#if dataLoaded}
    <article><!-- Your content --></article>
  {:else}
    <div>Loading...</div>
  {/if}
</PageContainer>

Best Practices

When to Use

• Landing pages requiring elegant entrance animations
• Article layouts with optimal reading width
• Form pages that benefit from focused layouts
• Profile pages needing intimate, personal feel
• Content pages like documentation or blogs

When Not to Use

• Dashboard layouts with multiple columns
• Data tables requiring full-width display
• Gallery layouts with grid-based content
• Complex applications needing custom constraints

Implementation Tips

1. Always set mounted after data loads to prevent content flash
2. Use with proper heading hierarchy for accessibility
3. Consider loading states before mounting content
4. Test animations on slower devices for performance
5. Combine with vertical scrolling patterns for long content

Accessibility

• Respects reduced motion preferences through CSS
• Maintains focus management during transitions
• Provides semantic structure for screen readers
• Ensures content remains keyboard accessible

Performance

• Lightweight component with minimal JavaScript
• CSS-only animations for smooth performance
• No external dependencies beyond Svelte
• Optimized for all device types and screen sizes