Freehtmlcssjs

Bento features with micro-interactions

Dark SaaS bento grid where cards rise in, charts draw themselves, numbers count up, and cards tilt toward the cursor with a spotlight.

Prompt

## Goal

Design a features section for Pulseboard, a real-time monitoring platform for engineering teams. Keep the tone confident and technical.

Use the style, layout and motion rules below exactly. Replace the sample content with features, numbers and labels that fit the goal, keeping the same number of cards, the same kind of visual in each card, and similar text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does.
- Page background #07080B. Content max-width 1200px, centered, padding 96px 24px 112px.
- Behind all content, a fixed full-screen dot grid: 1px dots in white at 8% opacity on a 24px grid, faded out toward the edges with an elliptical mask (fully visible in the upper middle of the screen, gone at the edges). A second layer of the same grid with brighter violet dots (rgb(167 139 250 / 0.7)) shows only inside a 280px soft circle around the cursor, fading out by 70% of its radius. At rest, that circle sits at 50% across and 22% down the screen, behind the heading. The grid never blocks clicks.
- Cards: background #0E1016, 1px border rgb(255 255 255 / 0.07) (rgb(255 255 255 / 0.14) on hover), 24px radius, 28px padding.
- Text #E6E8EE, muted text #8A90A2. Accent gradient from violet #8B5CF6 to cyan #22D3EE. Success green #34D399, warning amber #F59E0B.
- Font: system-ui. Numbers use tabular figures.
- Section header, centered, max-width 720px, 56px above the grid: a pill eyebrow (13px semibold muted text, 1px border at 14% white, a 6px gradient dot), a 52px bold heading with -0.03em letter spacing where the last few words use the violet-to-cyan gradient as text color, and an 18px muted paragraph.
- Card label row: a 28px rounded-square icon tile (violet at 14% opacity, violet line icon) followed by an uppercase 13px semibold muted label with 0.08em letter spacing. Card headings are 22px semibold; card body text is 15px muted.
- Stat numbers are the biggest thing in their card, never body text: analytics stats 24px bold, the uptime percentage **64px bold** (line-height 1, -0.04em letter spacing, text color #E6E8EE), the ring percentage 40px bold, all with tabular figures. Give them their own class and make sure no general card text rule (such as a style for every `p` in a card) overrides their size.
- Buttons are pills, 14px 26px padding, 15px semibold. Primary: violet-to-cyan gradient with a soft violet glow. Secondary: transparent with a 1px border at 14% white.
- Every focusable element shows a 2px cyan focus outline with 3px offset.

## Layout

1. Section header (eyebrow, heading, paragraph).
2. Bento grid: 3 equal columns, rows 320px tall, 16px gap. Row 1: a wide card spanning 2 columns, then 1 card. Row 2: 3 cards. Each card has its label row at the top, optional heading and text, and its visual pinned to the bottom.
- Wide card, "analytics": two headline stats with small captions and a small green "▲ change" note in one row, above a full-width smooth line chart drawn in SVG with the violet-to-cyan gradient as its stroke, a gradient fill fading to transparent under the line, 3 faint horizontal grid lines, and a cyan dot at the line's last point.
- Card, "uptime": one 64px bold percentage as the card's main visual, a green "all good" status line with a small pulsing green dot, then a row of 20 thin rounded status bars (green, one amber and shorter).
- Card, "budget": a heading, then a 120px SVG progress ring (12px stroke, faint track, gradient value with round caps) next to a 40px bold percentage and a short caption.
- Card, "activity feed": a heading, then 3 stacked rows (#12151D background, 1px border, 12px radius), each with a small green check circle, a monospace cyan identifier and a right-aligned muted time.
- Card, "team": a heading and one line of text, then a row of 5 overlapping 52px initial avatars in pastel colors plus a "+N" bubble.
3. Two centered buttons, 48px below the grid: primary and secondary.

Under 900px wide, the grid becomes one column with cards at least 260px tall, and the heading drops to 38px.

## Motion

All motion uses the easing cubic-bezier(0.22, 1, 0.36, 1) unless stated. Write it with CSS transitions and keyframes plus a small vanilla script; no animation libraries.
- **Entrance:** each card starts at opacity 0, moved down 24px. When a card is 20% visible (IntersectionObserver), it fades and rises into place over 600ms. Cards enter 80ms apart, in grid order. Each card animates only once.
- **Chart:** after its card enters, the line draws from left to right over 1400ms, starting 300ms later (stroke-dasharray/dashoffset with pathLength="1"). The fill fades in over 800ms starting at 1100ms. The end dot appears at 1600ms, then pulses (scale 1 to 1.5 and back) every 2s.
- **Numbers:** every stat counts up from 0 to its value over 1200ms with a cubic ease-out, starting 300ms after its card enters, keeping its decimals and suffix (e.g. 2.4M, 38ms, 99.98%).
- **Status bars:** grow up from the bottom (scaleY 0 to 1) over 500ms, starting at 400ms, 30ms apart.
- **Ring:** fills to its value over 1200ms, starting at 300ms (stroke-dashoffset with pathLength="100").
- **Feed rows:** fade in and slide from 16px left over 500ms, starting at 450ms, 120ms apart.
- **Live dot:** a green ring expands and fades from the dot every 1.8s.
- **Hover, every card:** a soft violet radial spotlight (420px circle, violet at 16% opacity, fading out at 60%) follows the cursor inside the card, the border brightens, and the card tilts in 3D toward the cursor, up to 6deg on each axis (grid has perspective 1000px), easing back to flat over 400ms when the cursor leaves.
- **Hover, team card:** the overlapping avatars spread apart over 400ms; the avatar under the cursor lifts 6px.
- **Hover, buttons:** the primary button lifts 2px and its glow grows; the secondary button gets a faint white background.
- **Background spotlight:** the bright-dot circle follows the cursor anywhere on the page, easing toward it by 12% of the remaining distance every animation frame, so it trails smoothly instead of snapping. It only animates while it is catching up, and stays at its resting position on touch screens.
- **Reduced motion:** with prefers-reduced-motion: reduce, show every final state immediately: no entrance, drawing, counting, pulsing, tilt or spotlights. The background grid stays visible with its bright circle fixed at its resting position.

## Sample content

- Eyebrow "Features". Heading "Everything your team needs to ship with confidence" with "ship with confidence" in the gradient. Paragraph "Pulseboard watches every deploy, request and incident in real time, so you see problems before your users do."
- Analytics: label "Real-time analytics", heading "Every request, the moment it happens", text "Latency, errors and throughput, streamed live.", stats "2.4M requests today" and "38ms p95 latency", note "▲ 12.5% vs last week".
- Uptime: label "Uptime", value "99.98%", status "All systems operational".
- Budget: label "Error budget", heading "Know how much risk is left", value "82%", caption "of this month's budget left".
- Feed: label "Deploys", heading "Every deploy, verified", rows "api@4f2c1a9 · 2m ago", "web@91be07d · 18m ago", "worker@c03d5e2 · 1h ago".
- Team: label "Team", heading "On-call, together", text "Alerts reach the right person, with context.", avatars AK, MR, JS, DL, PN and "+12".
- Buttons "Start free trial" and "Book a demo".

## Images

This design uses no photos: every visual is CSS, inline SVG and text. Do not add images. Draw icons as simple inline SVG line icons.

## Output

A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with no libraries, frameworks, web fonts or external files. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML.

Loading live preview…

## Goal Design a features section for Pulseboard, a real-time monitoring platform for engineering teams. Keep the tone confident and technical. Use the style, layout and motion rules below exactly. Replace the sample content with features, numbers and labels that fit the goal, keeping the same number of cards, the same kind of visual in each card, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. - Page background #07080B. Content max-width 1200px, centered, padding 96px 24px 112px. - Behind all content, a fixed full-screen dot grid: 1px dots in white at 8% opacity on a 24px grid, faded out toward the edges with an elliptical mask (fully visible in the upper middle of the screen, gone at the edges). A second layer of the same grid with brighter violet dots (rgb(167 139 250 / 0.7)) shows only inside a 280px soft circle around the cursor, fading out by 70% of its radius. At rest, that circle sits at 50% across and 22% down the screen, behind the heading. The grid never blocks clicks. - Cards: background #0E1016, 1px border rgb(255 255 255 / 0.07) (rgb(255 255 255 / 0.14) on hover), 24px radius, 28px padding. - Text #E6E8EE, muted text #8A90A2. Accent gradient from violet #8B5CF6 to cyan #22D3EE. Success green #34D399, warning amber #F59E0B. - Font: system-ui. Numbers use tabular figures. - Section header, centered, max-width 720px, 56px above the grid: a pill eyebrow (13px semibold muted text, 1px border at 14% white, a 6px gradient dot), a 52px bold heading with -0.03em letter spacing where the last few words use the violet-to-cyan gradient as text color, and an 18px muted paragraph. - Card label row: a 28px rounded-square icon tile (violet at 14% opacity, violet line icon) followed by an uppercase 13px semibold muted label with 0.08em letter spacing. Card headings are 22px semibold; card body text is 15px muted. - Stat numbers are the biggest thing in their card, never body text: analytics stats 24px bold, the uptime percentage **64px bold** (line-height 1, -0.04em letter spacing, text color #E6E8EE), the ring percentage 40px bold, all with tabular figures. Give them their own class and make sure no general card text rule (such as a style for every `p` in a card) overrides their size. - Buttons are pills, 14px 26px padding, 15px semibold. Primary: violet-to-cyan gradient with a soft violet glow. Secondary: transparent with a 1px border at 14% white. - Every focusable element shows a 2px cyan focus outline with 3px offset. ## Layout 1. Section header (eyebrow, heading, paragraph). 2. Bento grid: 3 equal columns, rows 320px tall, 16px gap. Row 1: a wide card spanning 2 columns, then 1 card. Row 2: 3 cards. Each card has its label row at the top, optional heading and text, and its visual pinned to the bottom. - Wide card, "analytics": two headline stats with small captions and a small green "▲ change" note in one row, above a full-width smooth line chart drawn in SVG with the violet-to-cyan gradient as its stroke, a gradient fill fading to transparent under the line, 3 faint horizontal grid lines, and a cyan dot at the line's last point. - Card, "uptime": one 64px bold percentage as the card's main visual, a green "all good" status line with a small pulsing green dot, then a row of 20 thin rounded status bars (green, one amber and shorter). - Card, "budget": a heading, then a 120px SVG progress ring (12px stroke, faint track, gradient value with round caps) next to a 40px bold percentage and a short caption. - Card, "activity feed": a heading, then 3 stacked rows (#12151D background, 1px border, 12px radius), each with a small green check circle, a monospace cyan identifier and a right-aligned muted time. - Card, "team": a heading and one line of text, then a row of 5 overlapping 52px initial avatars in pastel colors plus a "+N" bubble. 3. Two centered buttons, 48px below the grid: primary and secondary. Under 900px wide, the grid becomes one column with cards at least 260px tall, and the heading drops to 38px. ## Motion All motion uses the easing cubic-bezier(0.22, 1, 0.36, 1) unless stated. Write it with CSS transitions and keyframes plus a small vanilla script; no animation libraries. - **Entrance:** each card starts at opacity 0, moved down 24px. When a card is 20% visible (IntersectionObserver), it fades and rises into place over 600ms. Cards enter 80ms apart, in grid order. Each card animates only once. - **Chart:** after its card enters, the line draws from left to right over 1400ms, starting 300ms later (stroke-dasharray/dashoffset with pathLength="1"). The fill fades in over 800ms starting at 1100ms. The end dot appears at 1600ms, then pulses (scale 1 to 1.5 and back) every 2s. - **Numbers:** every stat counts up from 0 to its value over 1200ms with a cubic ease-out, starting 300ms after its card enters, keeping its decimals and suffix (e.g. 2.4M, 38ms, 99.98%). - **Status bars:** grow up from the bottom (scaleY 0 to 1) over 500ms, starting at 400ms, 30ms apart. - **Ring:** fills to its value over 1200ms, starting at 300ms (stroke-dashoffset with pathLength="100"). - **Feed rows:** fade in and slide from 16px left over 500ms, starting at 450ms, 120ms apart. - **Live dot:** a green ring expands and fades from the dot every 1.8s. - **Hover, every card:** a soft violet radial spotlight (420px circle, violet at 16% opacity, fading out at 60%) follows the cursor inside the card, the border brightens, and the card tilts in 3D toward the cursor, up to 6deg on each axis (grid has perspective 1000px), easing back to flat over 400ms when the cursor leaves. - **Hover, team card:** the overlapping avatars spread apart over 400ms; the avatar under the cursor lifts 6px. - **Hover, buttons:** the primary button lifts 2px and its glow grows; the secondary button gets a faint white background. - **Background spotlight:** the bright-dot circle follows the cursor anywhere on the page, easing toward it by 12% of the remaining distance every animation frame, so it trails smoothly instead of snapping. It only animates while it is catching up, and stays at its resting position on touch screens. - **Reduced motion:** with prefers-reduced-motion: reduce, show every final state immediately: no entrance, drawing, counting, pulsing, tilt or spotlights. The background grid stays visible with its bright circle fixed at its resting position. ## Sample content - Eyebrow "Features". Heading "Everything your team needs to ship with confidence" with "ship with confidence" in the gradient. Paragraph "Pulseboard watches every deploy, request and incident in real time, so you see problems before your users do." - Analytics: label "Real-time analytics", heading "Every request, the moment it happens", text "Latency, errors and throughput, streamed live.", stats "2.4M requests today" and "38ms p95 latency", note "▲ 12.5% vs last week". - Uptime: label "Uptime", value "99.98%", status "All systems operational". - Budget: label "Error budget", heading "Know how much risk is left", value "82%", caption "of this month's budget left". - Feed: label "Deploys", heading "Every deploy, verified", rows "api@4f2c1a9 · 2m ago", "web@91be07d · 18m ago", "worker@c03d5e2 · 1h ago". - Team: label "Team", heading "On-call, together", text "Alerts reach the right person, with context.", avatars AK, MR, JS, DL, PN and "+12". - Buttons "Start free trial" and "Book a demo". ## Images This design uses no photos: every visual is CSS, inline SVG and text. Do not add images. Draw icons as simple inline SVG line icons. ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with no libraries, frameworks, web fonts or external files. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML.