polaroid-frame-treatment

name	polaroid-frame-treatment
description	Use when displaying user-generated photos, testimonials, or 'real moment' imagery. Polaroid frame adds personality and authenticity.

Polaroid Frame Treatment

Polaroid frame = white border around image with extra bottom space for caption. Slightly skewed/rotated. Adds 'physical photo' feel.

Polaroid anatomy

1. White (or cream) border around image (8-15px on sides + top)
2. Bottom border 60-100px (for caption)
3. Slight rotation (-2° to +2°)
4. Subtle drop shadow (0 4px 12px rgba(0,0,0,0.1))
5. Caption text: hand-written feel or italic body
6. Image inside: photo, slightly desaturated

CSS implementation

.polaroid {
  background: var(--cream);
  padding: 12px 12px 60px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: rotate(-2deg);
  position: relative;
}
.polaroid:nth-child(even) {
  transform: rotate(2deg);
}
.polaroid img {
  width: 100%;
  filter: saturate(0.9) brightness(0.98);
}
.polaroid .caption {
  position: absolute;
  bottom: 16px;
  left: 12px;
  font-style: italic;
  color: var(--ink-70);
}

When to use

1. Customer testimonial photos
2. Founder/team photos (informal)
3. Behind-the-scenes content
4. 'Real moments' editorial
5. Vintage/nostalgic content

Don't use:

• Product photography (too informal)
• Brand identity imagery
• High-end marketing campaigns

Where this fits in the X3 empire

Used in CardPrepAI testimonials and behind-the-scenes content.