REFERENCE
- Gallery page: https://magpui.com/en/i/striped-customer-story-cards-cf5d82
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/striped-customer-story-cards-cf5d82/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/striped-customer-story-cards-cf5d82/clip.mp4
- Original post: https://x.com/oguzyagizkara/status/2112524525917143529 by @oguzyagizkara
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a horizontal set of tall customer-story cards, not an entire landing page. Pair a luminous indigo card with a near-black card. Their distinguishing feature is a large abstract shape made entirely of fine vertical strokes: a rounded bulge on the blue card and opposing diagonal bands on the dark card. Keep a small identity placeholder at the top and short story copy near the bottom. Do not rebuild the design-editor handles or measurement overlays visible in the recording.
DESIGN SYSTEM: At desktop size target cards approximately 280px wide by 370px tall, 28px gaps, and 28px internal padding. Use square corners, no border and no shadow. Blue surface is an estimated gradient from #21116B at the top to #4937FF at the bottom; the adjacent surface is #151515. Type is a compact neutral sans-serif: 15px semibold identity label, 16px regular description with 21px leading, 11px secondary story link. Use #F3F1FF for primary text and #C8C2EB for secondary text. Put the abstract graphic across the middle two-thirds of the card, behind the copy, with 1px vertical strokes separated by roughly 4px. Vary stroke lengths and opacity to imply volume rather than using a solid silhouette.
MOTION: Give the striped shapes a restrained ambient change in vertical envelope and opacity, while all card text remains fixed. As an implementation starting point, use a 2800ms alternating loop with no delay and cubic-bezier(0.45,0,0.55,1), moving the graphic by at most 8px and varying opacity between 0.25 and 0.5. These timings are reconstruction targets, not measured source timings. Do not animate design-selection rectangles.
SECTIONS: Each card contains an identity placeholder, a decorative striped geometric field, a two-to-three-line description and a small story link with a right arrow. Default state remains legible over the graphic; focus state gives the link a clear outline. Preserve the same hierarchy when cards stack on small screens.
IMPLEMENTATION: Use semantic HTML, CSS grid and an inline SVG for each striped motif. Clip parallel lines into original curved or angular silhouettes, varying opacity to suggest a rounded surface. Use CSS transform and opacity animation on graphic groups; no WebGL or animation library is necessary. Keep the SVG to fewer than 100 lines per card and avoid per-frame JavaScript. Under prefers-reduced-motion show the shapes still. Use real anchors for story links, keyboard access, 2px visible focus rings, and at least 44px link hit areas. Treat decorative SVG as aria-hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map the estimated colors to the closest existing tokens. Never copy source logos, brand names, photos or illustrations; use neutral identity labels and original SVG forms.
SUCCESS CHECK:
- The curved and diagonal motifs read as fine vertical stripes, not solid 3D objects.
- All text remains readable, with top identity and bottom story text stable during motion.
- Cards fit a 360px viewport without page overflow, and keyboard focus and reduced-motion behavior work.
