Polaroid & sticker
The tilted, white-bordered photos and die-cut stickers scattered around the hackclub.com hero. Polaroids straighten on hover. Visitors can drag movable stickers around, or move them with the arrow keys once focused.
<hc-polaroid src="https://hackclub.com/assets/hero_photo1.webp" alt="Teenagers at a hackathon" rotate="-6"></hc-polaroid>
<hc-polaroid src="https://hackclub.com/assets/hero_photo2.webp" alt="A club meeting" rotate="4" caption="Club night"></hc-polaroid>
<hc-sticker src="https://hackclub.com/assets/hero_sticker1.webp" alt="Hack Club sticker" rotate="-8" movable></hc-sticker>
<hc-sticker src="https://hackclub.com/assets/hero_sticker3.webp" alt="Orpheus sticker" rotate="10" movable></hc-sticker>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
src, alt | string | Image | |
rotate | number | polaroid -4, sticker 6 | Tilt in degrees |
hc-polaroid caption | string | Caption under the photo | |
hc-sticker movable | boolean | Allow dragging |
Slots
| Name | Description |
|---|---|
caption | Rich caption for <hc-polaroid> |
Events
| Name | Description |
|---|---|
hc-move | <hc-sticker> was dropped. detail: { x, y } |
CSS custom properties
| Name | Description |
|---|---|
--hc-polaroid-width / --hc-sticker-width | Width (240px / 120px) |