Flipped Site Showcase

Platform-Specific Component Demo

This page demonstrates platform-specific component loading. The component below has different styles based on the platform you are viewing:

Desktop version: Blue background
Mobile version: Red background

The platform is determined by the PLATFORM env variable accessible by __PLATFORM__ in the app as ''(desktop) or 'mobile'(mobile).

Current Platform View:

Desktop Platform

This works by using Vite's plugin system to intercept file resolution during the build process. When the app tries to import PlatformIndicator.tsx, the plugin checks if a PlatformIndicator.mobile.tsx exists and uses that instead when building for mobile.

FlipBox Styling System

A simplified styled component system for creating flexible layouts:

FlipBox Generator

Customize your FlipBox component and see the code:

Preview Area (vertical)

Preview Area (horizontal)

UI Components

Component library available in this template:

Modal Dialog

Accessible modal dialog component based on Radix UI

Popover

Floating popover component based on Radix UI with FlipBox integration

Form Controls

Form input components with label and hint

Email Address

We'll never share your email with anyone else.

3D Scene Examples

Interactive 3D scenes with modern rendering techniques:

View React Three Fiber Scene

View Legacy Three.js Scene

Layout Examples

Layout components for building consistent page structures:

Header & Footer

Standard header and footer components with navigation.

View Full Layout Example

Form Examples

Form components with validation and map integration:

Google Maps Integration

Map integration components.

View Data Centers Example

Platform-Specific Components

Components that adapt to different platforms:

Platform Detection Demo

A demonstration of platform-specific component rendering.

View Platform Demo