Want to build this yourself? Here's the exact prompt motionsites.ai/?prompt=parti… ❤️‍🔥 Get this and 600+ more website prompts at MotionSites

Here's the free prompt 👇 motionsites.ai/?prompt=reelm… # Prompt: Reelmark hero Build a single-file, one-screen **landing hero for a short-form video creator marketplace**, **Reelmark** ("Captivate Crowds with Snackable Reels"). Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is soft mint studio: a warm off-white page `#F5F8EF`, deep forest-green accents `#08482D`, a mint badge `#DAE7C7`, a big bold black headline, and an arched row of seven tall video cards playing bright sage-green product clips, with hand-drawn green notes and arrows. ## Frame - **Frame:** one **1440×1080** frame, contained and centred: `--u = min(100vw/1440, 100vh/1080)`. Every element is placed in frame units. ## Type - **Headline:** **Inter Tight 700**, 88u on a 92u line, tracking −0.035em (−0.022em on line 2), ink `#101410`. - **UI:** **Inter** 400/500. The subline is `#5E5E61`. - **Notes:** **Caveat 600** for the hand-drawn notes, in forest green. ## Layout (1440×1080) - **Top bar:** - **Logo:** a green leaf mark with "Reelmark", at (37, 36). - **Nav:** Brands · Creators · Pricing · Use Cases · Contact, Inter 16.4u, starting at x = 505 with a 31u gap. - **Buttons:** a white "Log in" pill, 92×40 at (1211, 29), and a forest-green "Sign up" pill, 97×40 at (1304, 29). - **Badge:** a mint pill, 292×37 at (575, 115): "Trusted by 120,000+ indie makers", Inter 500 16.6u in green. - **Headline:** centred, top 176: **"Captivate Crowds / with Snackable Reels"**. - **Subline:** centred, top 394, 20.8u / 32u, three lines: "Grow your brand with short, snappy product clips by / our handpicked video makers. Our crew is ready to / lift your next launch higher." - **Notes:** - a "//" doodle at (263, 377) - a handwritten "Be seen / with clips" rotated 16° at (1212, 310), with a long curving arrow down to the cards - "Zero cost" rotated 24° at (521, 937), with a small arrow pointing to the button - the doodle strokes draw themselves in - the "Be seen" arrow starts **below** the note (it never crosses the words) and curls down to the cards - **Card row: a curved video carousel.** Ten tall cards scroll continuously **right → left** (about 50u per second, looping seamlessly). The row is draggable with the pointer or touch: it follows the drag 1:1, coasts with momentum after release (velocity decays about 95% per second), then the slow auto-scroll carries on. The cursor is grab / grabbing. - **Curve:** each card's geometry comes from its x position relative to the centre, like the inside of a cylinder. - Normalised distance d = |x − 720| / 706. - Width = (170 + 48·d²)u. Cards sit on an even 196u pitch, then each centre is pushed outward: x = 720 + t·(1 + 0.083·(t/706)²), where t is the unpushed offset from the centre. This keeps about a 26u gap even at the edges. - Each vertical edge's height = (280 + 92·q^2.6)u, where q is that edge's own normalised distance. - The vertical centre sits at (687 − 12·d²)u. - **Result:** centre cards are upright 170×280 rectangles, and cards near the screen edges grow to about 370u tall with their outer edge taller than the inner edge. - **Drawing:** each card is a rounded quad (`clip-path: path()`, 15u corners) recomputed every frame. - **Details:** no drop shadow, a small frosted round play icon at each card's bottom-left, and cards clipped by the frame edges. - **Button:** a forest-green "Make a Reel" pill (172×58) inside a dashed green outline ring (190×74) at (626, 901). ## Card media (one video for all ten) - **Grid:** all card clips live in ONE 16:9 **5×2 grid** (10 tiles of 384×540, edge to edge): - **Still poster:** `d2ol7oe51mr4n9.cloudfront.ne…` - **Loop:** `d2ol7oe51mr4n9.cloudfront.ne…` (1280×720, 5s, muted, loops) - **Tiles** (row-major) are the sneaker, skincare splash, latte pour, headphones, plant shop, florist bouquet, pottery wheel, serum splash, latte top-down and headphones on a stand. Each tile animates on its own. - **Each card:** shows its own tile, cover-fitted. Inside the clipped card, place a `

Want to build sites like this? Get 600+ prompts at motionsites.ai/?prompt=green…

Want to build this yourself? Here's the exact prompt ❤️‍🔥 Get this and 600+ more website prompts at motionsites.ai # Prompt: Meadowbell hero Build a single-file **landing hero for an animated kids' farming series**, "Hollyoak's Plucky Sprout Squad", from a fictional studio, **Meadowbell**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a sunny hand-painted anime (Ghibli-like) afternoon: a boy and his beagle lie on a grassy hillside looking up at a big blue sky full of cumulus clouds, with a green valley far off on the right. ## Scene - **Plate:** the whole scene is ONE 9:8 background image (2160×1920): `d2ol7oe51mr4n9.cloudfront.ne…`. - **Sky:** a deep-to-light blue sky across the top 60%, with a tall cumulus cloud on the left, another on the right, and wispy streaks top-right. - **Hillside:** the boy (messy brown hair, white shirt, blue shorts, hands behind his head) and a brown-and-white beagle lie at the left, looking up. Grass and wildflowers fill the bottom third, softly blurred at the very bottom. - **Motion:** the scene moves only through a looping video of the same plate: `d2ol7oe51mr4n9.cloudfront.ne…` (960×960, 5s, muted, loops; first frame = last frame). - The grass ripples in steady waves, daisies nod, the boy's hair and shirt flutter, the dog's ears lift, and the clouds drift right. - The video was rendered square from the plate mirror-padded 120/1920 at the top and bottom. Lay it over the plate at **100% width, 112.5% height, top −6.25%** so its middle sits exactly on the plate. - **Rule:** nothing in the scene is drawn or animated in code. ## Frame and scaling - **Frame:** the hero is **one 1440×1280 frame** (9:8) that scales with the viewport width: `--u = 100vw/1440`, height 1280u. On a 1440×900 screen the headline, buttons and the boy and dog show first, and the chapters row sits just below the fold. - **Placement:** every element below is placed in frame units. ## Type and colour - **Display:** **Grandstander 900**, a rounded, slightly bouncy display face, all white. It's used for the logo, the kicker, the headline and the section title. - **Everything else:** **Inter** 400/500. Self-host the latin woff2 files. - **Colours:** text is white with a soft blue shadow `0 4u 18u rgba(28,70,120,.28)` on the headline. Button text green is `#5b875c`. ## Layout (1440×1280 frame) - **Nav:** - **Logo:** "Meadowbell" 29.5px with a small white two-leaf sprout icon, at (31, 23). - **Nav pill:** a translucent sage pill `rgba(173,196,174,.45)` with backdrop blur, 546×50 at (443, 13), radius 25. Inside: Farm · Gear · Chapters · Our Crew, Inter 500 19.5px, 54px apart, starting 49px in. - **Join us:** a white pill, 105×45 at (1311, 14), green Inter 500 18.5px. - **Copy, centred:** - **Kicker:** "HOLLYOAK'S" 40.5px, cap top at y = 203. - **Headline:** **"PLUCKY / SPROUT SQUAD"**, 143.5px on a 118px line pitch, cap top at y = 261. - **Subline:** Inter 21.2px / 27px, three lines: "Learn the Ways of the Meadow with / Hollyoak's Plucky Sprout Squad! Each chapter is / packed with play, chores, and wonder." - **Join us button:** white pill, 144×59 at (550, 617), green 22px. - **Watch preview button:** translucent mint pill `rgba(204,218,173,.6)` with blur, 184×58 at (707, 619). It has a white rounded play triangle and white 19.5px text. - **Chapters row:** - **Title:** "CHAPTERS" 36px at (137, 866). - **Link:** "browse all chapters ›" 22px, right-aligned to x = 1308. - **Cards:** three 378×273 cards at x = 133, 531, 929 (y = 913), radius 15, soft shadow, each with a white rounded play triangle 20px in from the bottom-left. Card art: - a vegetable garden with tomato stakes and a cottage: d2ol7oe51mr4n9.cloudfront.ne… - a boy and dog on a hill path among sheep above the sea: d2ol7oe51mr4n9.cloudfront.ne… - a girl in a straw hat flying a kite on a breezy hill: d2ol7oe51mr4n9.cloudfront.ne… ## Motion (UI only) - **Entrance**, one Web Animations timeline, run once: - the logo, nav and Join us drop in - the kicker un-blurs - each headline line springs up out of a blur, 0.16s apart - then the subline, both buttons, the chapters title and link, and the three cards rise in turn - **Hover:** the cards lift 8u and their art zooms to 1.05. The pills rise 2u, and the chevron nudges right. - **Reduced motion:** no video and no transitions. ## Phones (≤ 820px) - **Nav:** compact, with the logo and Join us. - **Copy:** stacked and centred in flow, with the headline at 51px. - **Chapters:** a swipeable row of cards. - **Scene:** the 9:8 plate and video sit in one 9:8 box sized to the hero's height and shifted so the boy and dog stay in view (left 18%, translateX(−18%)). ## Acceptance check (1440×1280) - The text, pills and cards sit at the coordinates above over the hillside scene. - The grass visibly ripples, the boy's hair and the dog's ears move, and the clouds drift. - The video lines up exactly with the still.

Want to build this yourself? You can get the exact prompt I used, along with 600+ more, here: motionsites.ai/3d-websites?p…

Want to build this yourself? You can get the exact prompt I used, along with 500+ more, here: motionsites.ai/?prompt=arcti…

Want to build this yourself? You can get the exact prompt I used, along with 500+ more, here: motionsites.ai/3d-websites?p…