Split Screen

# Visual style: Split Screen

Symmetric or asymmetric split-screen layout creating visual tension through contrast and balance. Commonly used for product showcases, brand stories, and comparison pages.

## Philosophy
Split Screen is a layout approach that divides the viewport into two or more regions, creating visual tension and narrative effect through contrast.

Core principles:
- Contrast emphasis: Highlight differences or connections through left-right contrast
- Visual balance: Maintain visual weight balance even when asymmetric
- Narrative guidance: Guide the user's gaze to flow between both sides
- Space utilization: Fully leverage the advantages of widescreen displays

## Do
- Use CSS Grid or Flexbox for split screen grid grid-cols-2
- Large screens maintain split, small screens stack lg:grid-cols-2 grid-cols-1
- Use contrasting or complementary content
- Visual elements on one side, text content on the other
- Maintain visual weight balance between both sides
- Add transition animations to enhance experience
- Consider split-screen scroll locking effects

## Don't
- Do not have identical content on both sides (pointless split)
- Do not keep split layout on mobile (too narrow)
- Do not create severe visual weight imbalance between sides
- Do not ignore content reading order
- Do not make divider lines too harsh

## Rules for the AI
You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines

## Must Follow

- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content

## Layout Patterns

50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width

60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side

Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls

## Panel Content

Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content

Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy

## Responsive

Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios

## Animation & Interaction Rules

- Counter-Weight Focus: Hover one panel while the opposite panel gently desaturates or fades in prominence.
- Sharp Editorial Cuts: Button hover uses direct black-white inversion with short duration and no gradient easing tricks.
- Screen-Spanning Lines: Center divider or split seam can briefly intensify on focus change, but motion stays minimal.
- Static Text: Descriptive text blocks must stay position-stable; avoid translate or scale on body copy.

## Self-Check

After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth