phoneFrame
A realistic CSS mobile phone frame — device chrome, dynamic island, side buttons, and home indicator. Pass arbitrary HTML into the content slot to fill the screen area. No images, pure CSS/HTML.
9:41
Good morning, Sarah
TODAY'S ENTRY
Feeling grateful today. The early morning light was something else — golden and soft through the curtains.
STREAK
5 day streak 🔥
phoneFrame({
content: `<div style="background:#1a2c24;min-height:520px;padding:0.75rem;">
<!-- your app screen UI -->
</div>`,
})Hover animation
Pass animate: true to enable a gentle 3-D tilt when the user hovers over the frame. Ideal for hero sections — hover the phone below to see it.
9:41
Good morning, Sarah
TODAY'S ENTRY
Feeling grateful today. The early morning light was something else — golden and soft through the curtains.
STREAK
5 day streak 🔥
phoneFrame({
content: `...`,
animate: true,
})| Prop | Type | Default | Description |
|---|---|---|---|
content | string (HTML) | '' | HTML rendered inside the screen area |
animate | boolean | false | Enables a gentle 3-D tilt on mouse hover — recommended for hero usage |
class | string | '' | Extra CSS classes on the root element |