Storyframe — Stories That Tap Forward

Summary

A cinematic, full-bleed fullscreen story carousel rendered as a complete one-screen 'Storyframe' landing on a deep-navy palette with a single amber accent and warm cream text. A sticky translucent navy nav sits over a two-column hero (LEFT: a 'FULLSCREEN STORY CAROUSEL . NEW PATTERN' pill eyebrow with a pulsing amber dot, a black 'Stories that tap forward.' headline whose 'tap forward.' is amber, a cream intro line, a 'Generate a story carousel' amber pill + a 'See it live' outlined button, and a two-item 'Copy-paste React + Tailwind' / 'Touch + keyboard ready' trust row; RIGHT: the hero centerpiece, a 9/16 phone-shaped story-card mock holding a full-bleed photo under layered navy gradients, a row of five segmented progress bars across the top, a story meta row (an 'SF' avatar + 'Storyframe' + '2 of 5 . 4s'), left/right tap-to-advance zones that reveal a circular arrow on hover, and a bottom caption block (a 'Chapter 02' amber tag, a 'The Golden Hour' title, a sub line, a cream 'Continue' button + a bookmark button), with a floating 'tap -> advance' accent card pinned to its lower-left). Below: a trust strip ('Shipped by teams at' + five icon logos), a 'Showcase' three-up gallery of full-bleed story cards each with its own segmented bars + category tag + caption, a full-bleed 'Prompt Library' section (a copy column beside a 'story-carousel.prompt' code card with a Copy button + tags + a rating chip), a 'Craft' 6-up bordered feature grid, a full-bleed gradient CTA panel, and a navy footer. Inter throughout, Iconify Solar 'solar:*' icons, immersive and cinematic, zero em-dashes.

Style

A cinematic, immersive, premium-editorial aesthetic where a deep-navy ground, warm cream type and a single bright amber accent make the page feel like a film title sequence. The page sits on a deep navy #0b1f3a ground (a navy ramp: 900 #081627 darkest, 800 #0b1f3a base, 700 #122e54, 600 #1b3e6e) with warm cream text (cream #f6f1e3 default, soft #e9e1cc, dim #bcb4a0 muted) and a single amber accent (amber #f0b429 default, soft #f8cf67, deep #c98a12) reserved for the brand mark, the headline highlight, primary buttons, progress-bar fills, category tags and icon accents. Surfaces are softly oversized-rounded (the hero story card rounded-[2rem], showcase cards rounded-3xl, the prompt code card / craft tiles rounded-3xl, buttons fully rounded-full) and lit with custom layered shadows: .slide-shadow '0 40px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(246,241,227,0.06)' (a deep cinematic drop + a faint cream hairline) on the story card / showcase cards / prompt card / floating accent card, and .glow-amber '0 0 0 1px rgba(240,180,41,0.25), 0 24px 60px -20px rgba(240,180,41,0.35)' (an amber-ringed glow) on the primary CTAs. Typography is Inter at every weight (400..900), font-black for the big headlines with tight tracking, medium for nav/body. Signature cinematic touches: a faint SVG fractal-noise .grain texture (opacity ~0.04) over the hero and CTA; large soft blurred decorative color blobs (an amber/10 blur and a navy-600/40 blur on the hero, an amber/10 blur on the prompt section, a centered amber/12 blur on the CTA); the layered slide gradients on every photo (a vertical from-navy-900/95 via-navy-900/10 to-navy-900/40 + a horizontal from-navy-900/30 to-transparent) keeping cream captions legible over any image; an amber ::selection (background amber, navy-900 text). The story carousel is the hero centerpiece: five SEGMENTED PROGRESS BARS (flex-1 h-1 rounded-full, seg track rgba(246,241,227,0.22), seg-fill amber #f0b429) where one bar runs a .seg-anim @keyframes fillbar (transform-origin left, scaleX 0 -> 1) over 5s linear (respecting prefers-reduced-motion: reduce), and LEFT/RIGHT TAP-TO-ADVANCE ZONES (inset-y-0 w-1/3 zones, opacity-0 hover:opacity-100, a .tap-hint / .tap-hint-l amber-tinted directional gradient + a circular navy-900/50 backdrop-blur arrow button). Immersive, cinematic, premium; warm human copy with zero em-dashes.

Layout & Structure

A sticky translucent navy nav, then a two-column hero (LEFT a pill eyebrow + a font-black headline with an amber highlight + a cream intro + a two-button row + a two-item trust row; RIGHT the hero centerpiece, a 9/16 story-card mock with segmented progress bars, a story meta row, left/right tap zones and a bottom caption block, plus a floating 'tap -> advance' accent card), then a trust strip, then a 'Showcase' three-up full-bleed story-card gallery, then a full-bleed 'Prompt Library' two-column section (a copy column beside a 'story-carousel.prompt' code card), then a 'Craft' 6-up bordered feature grid, then a full-bleed gradient CTA panel, then a navy footer. Most containers center in mx-auto max-w-7xl px-6 lg:px-8.

Sticky translucent nav

Hero (two-column)

Hero centerpiece: the fullscreen story card mock

Trust strip

Showcase gallery (three full-bleed story cards)

Prompt Library (full-bleed two-column + code card)

Craft feature grid (6-up bordered)

CTA panel (full-bleed gradient)

Footer

Responsive reflow

Special Notes

Built on the Tailwind CDN with a custom theme.extend: fontFamily.sans = ['Inter','sans-serif']; colors.navy { DEFAULT '#0b1f3a', 900 '#081627', 800 '#0b1f3a', 700 '#122e54', 600 '#1b3e6e' }, colors.cream { DEFAULT '#f6f1e3', soft '#e9e1cc', dim '#bcb4a0' }, colors.amber { DEFAULT '#f0b429', soft '#f8cf67', deep '#c98a12' }. Google Fonts: Inter (weights 400;500;600;700;800;900). CSS keys: html scroll-behavior smooth; body background #0b1f3a + color #f6f1e3 + font-sans + -webkit-font-smoothing antialiased + overflow-x-hidden. .grain { background-image an inline SVG feTurbulence fractalNoise baseFrequency 0.9 numOctaves 3 opacity 0.5 } used at opacity ~0.04. .glow-amber { box-shadow 0 0 0 1px rgba(240,180,41,0.25), 0 24px 60px -20px rgba(240,180,41,0.35) }. .slide-shadow { box-shadow 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(246,241,227,0.06) }. .seg { background rgba(246,241,227,0.22) }, .seg-fill { background #f0b429 }, .seg-anim { transform-origin left; animation fillbar 5s linear forwards } with @keyframes fillbar { from transform scaleX(0); to transform scaleX(1) }. @media (prefers-reduced-motion: reduce) { .seg-anim animation none; * scroll-behavior auto }. .tap-hint { background linear-gradient(90deg, rgba(11,31,58,0) 0%, rgba(240,180,41,0.10) 100%) }, .tap-hint-l { the 270deg mirror }. .mask-fade { -webkit-mask-image linear-gradient(to bottom, transparent, #000 8%, #000 100%) }. ::selection { background #f0b429; color #081627 }. Navy #0b1f3a is the ground (a navy ramp 900 #081627 / 800 #0b1f3a / 700 #122e54 / 600 #1b3e6e), cream is the type ramp (cream #f6f1e3 / soft #e9e1cc / dim #bcb4a0), amber #f0b429 (soft #f8cf67 / deep #c98a12) is the single accent used on the brand mark, the headline highlight, primary buttons, progress-bar fills, category tags and icon accents; navy slide gradients (a vertical from-navy-900/95 via-navy-900/10 to-navy-900/40 + a horizontal from-navy-900/30 to-transparent) keep cream captions legible over every photo. Icons via Iconify Solar 'solar:*' set (posts-carousel-vertical-bold, arrow-right-linear, play-circle-bold, bolt-bold, hand-shake-bold, menu-dots-bold, alt-arrow-left-linear, alt-arrow-right-linear, bookmark-linear, cursor-bold, planet-bold, black-hole-bold, cardholder-bold, diploma-bold, atom-bold, magic-stick-3-bold, copy-bold, check-circle-bold, chart-2-bold, hand-stars-bold, full-screen-square-bold, smartphone-2-bold, accessibility-bold, code-square-bold) plus mdi:github / ri:twitter-x-fill / mdi:discord in the footer, loaded from https://code.iconify.design/3/3.1.1/iconify.min.js. Photos via Unsplash. The reusable prompt-library value is the FULLSCREEN STORY CAROUSEL pattern: a full-bleed phone-shaped story card with segmented progress bars across the top (one animating via a 5s fillbar keyframe, mapping to slide count), left/right tap-to-advance zones that reveal a circular arrow on hover, a story meta row (avatar + name + '2 of 5 . 4s'), and a bottom caption block (a chapter tag + title + sub line + a Continue/bookmark button row), all over layered navy gradients on the photo, plus a floating 'tap -> advance' accent card, wrapped into a complete one-screen cinematic 'Storyframe' landing (a sticky translucent navy nav, a two-column hero, a trust strip, a three-up full-bleed showcase gallery whose cards reuse the segmented-bars + tag + caption pattern, a full-bleed 'Prompt Library' section with a 'story-carousel.prompt' code card, a 6-up bordered 'Craft' feature grid, a full-bleed gradient CTA panel and a footer). Original prompt-library product for the placeholder brand 'Storyframe', a cinematic full-bleed Instagram/Stories-style story-carousel angle distinct from the warm multi-card 'Glide' sibling. Responsive: the hero grid stacks lg:grid-cols-2 -> one column, the story card scales w-[300px] -> sm:w-[340px] at a fixed 9/16 aspect (the floating accent card hidden below sm), the showcase gallery collapses lg:grid-cols-3 -> sm:grid-cols-2 -> one column, the prompt-library lg:grid-cols-12 (5/7) -> one column, the craft grid lg:grid-cols-3 -> sm:grid-cols-2 -> one column, the nav center links hide below md and 'Sign in' below sm, the headlines scale (hero text-[2.7rem] -> sm:text-6xl, sections text-3xl -> sm:text-4xl, CTA text-4xl -> sm:text-5xl), the CTA button row + footer switch flex-col -> sm:flex-row, the trust strip wraps, and the body is overflow-x-hidden so the blurred blobs never scroll; no horizontal overflow at 390px.