Видеоклип за стартиране „Кадър по кадър“

Попитай ме за: името на продукта ми, лого (или да нарисуваш обикновена маркировка), едноредовото нещо, което потребителят въвежда в полето за подкана, страницата, която отговаря (заглавие + 2–3 изречения с една ключова фраза), две имена на функции за подредените карти и музикален запис. Ако пропусна някоя, използвам настройките по подразбиране: продукт „Кадър по кадър“ в неговия Whop хъб, маркировка във визьора (четири ъглови скоби около удебелен „FF“), подкана „Направете видеоклип за стартиране на приложението ми“, страница с урок, озаглавена „2.1 Изберете референтен материал“, карти „Стартиране“ и „Звук“ и безплатната хаус песен на Mixkit „Rising Forest“, забавена до 124 BPM.

12-секунден квадратен продуктов кадър, 1080x1080, брой кадри при 29.97 кадъра в секунда (f0–f359), мастер рендериран при 59.94 кадъра в секунда. Усещане като в Apple Keynote: меко, бяло, ярко синьо, стъклено. Камерата никога не прекъсва неподвижен кадър: всеки кадър влиза вече в движение (експоненциално easeout, 12–19% от оставащото разстояние на кадър) и излиза с ускоряващо се движение или рампа за размазване. Размазването следва скоростта и посоката при всяко движение.
Палитра: страница #FDFDFB, мъгла #B7CFEB, лед #E6F0FA, тъмносиньо #294376 → #769CC2 небесно градиентно, тъмносиньо #1E2F52, акцентно синьо #2F6BFF / #3CC8F0 / ментово #4ED6A0, бяло. Тип: Inter (400/500/600/700). Без лилаво, виолетово, магента или оранжево никъде.
История: заглавката на продукта се издига от синя мараня в светъл прозорец на приложение → курсор се плъзга вътре, обръща се към посоката, в която отива, расте при задържане на курсора и щраква върху логото → рязко преминаване на музикалното падане до иконата на приложението с четири квадрата, обикалящи около кръст → иконата се свива в лента с менюта на Mac → курсорът щраква върху иконата на лентата с менюта, появява се прозорец с подкана от матирано стъкло и подканата пише → бързо се накланя нагоре през светлосиня светкавица в страницата с отговори, превъртайки се на мястото си → карта се издига над нея → размазване и разтваряне до две подредени карти с гигантски заглавия от матирано стъкло → размазване и разтваряне до самотния диск с логото → рязко преминаване до черна крайна карта със светещ надпис.
Забранени: плавни преходи, замразени кадри (с изключение на един задържан в S7), стандартни UI комплекти, светене върху UI текст, Math.random, всичко, което прилича на шаблон.

Координатите са px на сцената 1080. Музикален такт k = 0.048 + 0.4838·ks (124 BPM, един такт = 14.5 кадъра). Трите твърди кадъра f72, f101, f159 се поставят 2 кадъра преди такт: запазете точно тези кадри.
S1 f0–71, заглавка + прозорец + щракване: мъгла #B7CFEB, преливаща до #FDFDFB до f28, запазвайки синьо сияние на пода #DBEEFD в долната част. Заглавка на един ред: диск с лого ⌀132 (#FBFCFE, 1px ръб #E8E8EA, тъмен знак), името на продукта (Inter 500), тъмна капсула хапче "на Whop" (#2F2E2F, бял текст); цялото заключване обхваща x474–1063, централната линия се издига y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), измествайки се с 1 px/кадър след това. Името изглежда размазано при f2, хапчето f4–5 силно размазано и се плъзга 15 px наляво, докато се изостря. Около него се появява прозорец със светлинен център (радиус 93, запълване #FCFDFF, горна лента #F1F6FF, синьо вътрешно сияние на пода): непрозрачност от 0 до f14, 0.53 f15, 0.7 f19, 1.0 f24; горен ляв ъгъл (408 405), преминава отдясно и отдолу. Вътре: хапче за търсене в горната лента, лява колона с икони (икона за курсове на (537 739), избледняла икона за чат на (537 900)) и карта на курс от (764 700) извън кадъра с изображение на корицата, заглавие и „Курс · 8 урока“. Cursor (черна стрелка на macOS, бял контур, 32x39) се появява f27 при (891 393), плъзга се наляво, забавяйки до (770 383) f44, завърта се, за да сочи надолу наляво f47–51, докато се спуска, каца в долния десен ъгъл на диска (629 564) f56 → (587 546) f59 → (555 531) f71; нараства ×1,55 при задържане на курсора от f56; мек леден пръстен (#D5F3FF → #F7FEFF, външен ⌀174) светва около диска от f53. Камерата увеличава около (540 540): 1,0 f46 → 1,2 f60 постепенно навлизане навън, задържа f61, след което постепенно намалява ускорението до 1,04 при f71, докато курсорът е натиснат (свива се с 15% f69–71).
S2 f72–100, икона + орбита: икона на приложението navy squircle (#294376 → #1E2F52, бяла маркировка), 276 px при f72 свиващи се до 178 px на f86, радиус 28% от ширината, върху сив ореолен диск #E9E9E7, нарастващ ⌀240 (f75) → 326 (f86). Четири квадрата от 92 px (радиус 26) се завъртат обратно на часовниковата стрелка, забавят се и се заключват в кръст при радиус на орбитата ≈216 на f86: бяло (1px #E3E8EF ръб + бледа сянка) ляво, #2F6BFF горе, #3CC8F0 дясно, #4ED6A0 долу. f88–100: иконата се свива ускоряващо до ≈40 px, квадратите се плъзгат в ред отдясно (бялото се изплъзва зад иконата), размазването се увеличава с 0,3 → 6 px.
S3 f101–158, лента с менюта + подкана: бяла страница над черна лента на рамката на лаптоп (y425–475, горен акцент #686866), тъмносиня лента с менюта (y477–538), тапет отдолу = градиент на синьото небе с тънки бели линии (един голям кръг, две хоризонтални линии, една вертикална, четириточков блясък на пресечка, меко синьо-зелено сияние горе вдясно). Десен клъстер на лентата с менюта в бяло: Wi-Fi, батерия, превключватели, маркировката на продукта на x531–584, три ⌀36 точки #2F6BFF / #3CC8F0 / #4ED6A0 на x612, 661, 709, „Пон юни 22 9:41 ч.“ 34 пиксела. Влиза в размазване 3 пиксела и се установява с f110. Cursor се повдига отдолу (f102), фиксира се върху маркировката, натиска f113–117. Камерата панорамира съдържанието надясно +125 px f115–130 (най-бързо f118–120). Матирана стъклена кутия (бяло-синьо стъкло над небето, ярък горен ръб, радиус 60) изниква изпод маркировката f116: ширината достига пик от 744 при f126 и се установява 726x228 на f138 около x196–922, y568–797. Подканата въвежда от f121 (първото четливо „Make“) до f150 (завършено) при около 1 символ/кадър със задържане от 1 кадър на всеки 2–3 символа; каретката винаги е включена; три бели контурни икони в долната част; бутон за изпращане #2F6BFF ⌀51 с бяла стрелка нагоре. От f136 цялата сцена се измества нагоре, ускорявайки се до накланяне тип „блъф“ (f158 се движи ≈25 px/кадър, вертикално размазване ≈6–8 px), докато страницата оцветява #E6F4FE над f154–158.
S4 f159–186, страница с отговори: страница с лек урок (навигационна пътека, заглавие, тяло): колона с текст x120, тяло 47 px Inter 400 сиво #BCBCBA, стъпка между редовете 58, една ключова фраза („кадър за кадър“) в черно 600. Пристига размазано и 420 px ниско, превърта нагоре с отмествания 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), след това пълзи −6 px с f186. Размазване 24 px (f159) → 1.5 (f165) → 0. Светкавица #E2F4FE, преливаща към #FDFDFB с f165. Курсор, сочещ право нагоре, се движи по превъртането и спира под ключовата фраза (≈(450,591) f180), след което се отмества надясно.
S5 f187–214, карта: бяла карта (x203–878, стига отдолу) се издига над страницата: изображение на корицата 627x536 вмъкнато 24 px, радиус 64, светла лента за хващане в горния ѝ център, надпис полуудебелен 38 px черен, поднадпис сив 23 px. Горна част на корицата y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), след което продължава да се издига ~4 px/кадър. Размазването на картата достига пик от 3.8 px при f189, рязко при f201; страницата отзад се размива до ≈2.5 px. Изход f207–214: картата се свива ~5% и се издига, докато целият кадър се размива 1 → 7 px; изрязано в пика на размазването.
S6 f215–244, две карти: бяла страница, две подредени карти 538x348 (радиус 57, празнина 36), центрирани на x540, горната карта се установява на y168 на f230, долната на y552. Всяка: корица (без текст, записан в нея), матирано хапче горе вляво („Модул 3“ / „Модул 5“), матиран кръгъл надпис „•••“ горе вдясно и огромно удебелено заглавие по долния ръб, направено от матирано стъкло (размазано, изсветлено копие на изображението, изрязано до буквите, отрязано от долния ръб на картата): „Стартиране“ и „Звук“. И двете влизат размазани 12 px и остри с f224; горната карта влиза с 8% голям размер и се издига от y264; долната карта се издига от y927, разположена зад нея. Те се изместват нагоре с 3 пиксела/кадър f230–238, след което се ускоряват и се размазват в кадъра.
S7 f245–300, диск с лого: страница #FDFDFB, диск ⌀168 #F6F6F6 с тъмния белег, издига се в центъра (горе y569 f245 → 491 f250 → 468 f255 → 456 f269) с вертикално размазване върху изрязаната рамка, задържа се неподвижно f269–287 (единственото замръзнало разтягане), след което се свива ускоряващо до ⌀123 при f300.
S8 f301–359, крайна карта: черен радиален фон (#020204 ъгли, ≈#272729 около думата), думата в Inter 600, бял #F3F3F5 със стегнато сияние плюс широк мек ореол, центрирано (540,540). Ширина на думата: ≈1650 px f301 (хоризонтално размазано, ивици от увеличение) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/свиване на кадъра) → 492 f350, след това свиване ease-in: 450 f355 → 267 f359 с размазване, нарастващо до 3.5 px. Филмът завършва по средата на свиването.

1. Една HTML страница, 1080x1080, изобразена от seek(t) като чиста функция на броя на кадъра. Без CSS преходи, без таймери, без Math.random (само хешове със семена). Кадрите се регистрират като {f0, f1, render(localFrame)}.
2. Всяка стойност е непрекъсната в номера на кадъра (мастерът 59.94 рендерира половин кадри): анимирайте с таблици с ключови кадри kf(frame, [[f, value],...], ease) и таблици за търсене на кадър с линейна интерполация. Без Math.floor при движение.
3. Размазване: CSS филтър „Размазване“ за кръгло размазване, SVG feGaussianBlur с отделно x/y stdDeviation за насочени размазвания. Размазване с мащабиране върху крайната карта = 20–30 мащабирани, избледнели копия на думата. Матирано стъкло = размазано, изсветлено копие на това, което е отзад, изрязано към формата.
4. Cursor: една SVG macOS стрелка (черно запълване, бял контур, мека сянка) с ротация и мащабиране, използвана повторно в S1, S3, S4.
5. Звук (без глас), точно 12.075 сек: музика на 124 BPM, меко интро, спад на 2.47 сек (5-ти такт, f72 кадърът изпреварва с 2 кадъра). Синтезирани звукови ефекти: мек удар 0.10 сек; свистене, достигащо връх в кадърите 2.402, 3.370, 5.305, 10.043 сек; преходът достига точно на 6.240 сек и 8.175 сек; щракания на 2.33 и 3.83 сек; много тихи тиктакания на клавишите на всеки ~32 ms в продължение на 4.04–5.00 сек; меко блясък на 10.05 сек. Мастер до −14 LUFS, истински пик −1 dBTP, без затихване освен последните 60 ms.
6. Рендерирайте с Playwright (една екранна снимка на кадър, шрифтовете се зареждат първо), кодирайте H.264 yuv420p на 60000/1001, мултиплексирайте звука.

Измервайте текста само след зареждане на шрифтовете. Дълго име на продукт няма да се побере там, където се побира 5-буквено име: мащабирайте цялото заключване (празнина на диска, име, хапче), за да се побере в диапазона x474–1063, не позволявайте на хапчето да падне извън кадъра. Бял квадрат на орбита изчезва на бялата страница без 1px ръб и бледа сянка. Не поставяйте изображения със собствен текст вътре в S6 картите, или стъкленото заглавие се удвоява. Поддържайте изрязаните рамки точни, дори когато не стоят на един участък. Нищо не замръзва, освен S7 f269–287. Силните таблици с размазване могат да изтрият напълно формата: ако рамката изглежда празна, намалете размазването, докато формата все още се чете.

Попитай ме за входните данни. След това ми покажи 4 кадъра (f40 заглавка в прозореца, f86 икона с кръст, f150 подкана за завършване, f230 двете карти), преди да рендираш целия филм.

Ask me for: my product name, a logo (or let you draw a simple mark), the one-line thing a user types into the prompt box, the page that answers it (title + 2–3 sentences with one key phrase), two feature names for the stacked cards, and a music track. If I skip any, use the defaults: product "Frame by Frame" living inside its Whop hub, a viewfinder mark (four corner brackets around a bold "FF"), prompt "Make a launch video for my app", a lesson page titled "2.1 Choose a reference", cards "Launch" and "Sound", and Mixkit's free house track "Rising Forest" slowed to 124 BPM.

A 12 second square product sting, 1080x1080, frame numbers at 29.97 fps (f0–f359), master rendered at 59.94 fps. Apple-keynote feel: soft, white, bright blue, glassy. The camera never cuts on a still frame: every shot enters already moving (exponential ease-out, 12–19% of the remaining distance per frame) and leaves on an accelerating move or a blur ramp. Blur follows speed and direction on every move.
Palette: page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 sky gradient, navy #1E2F52, accent blues #2F6BFF / #3CC8F0 / mint #4ED6A0, white. Type: Inter (400/500/600/700). No purple, violet, magenta or orange anywhere.
Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
Banned: crossfades, frozen frames (except one hold in S7), stock UI kits, glows on UI text, Math.random, anything that looks like a template.

Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
S1 f0–71, header + window + click: haze #B7CFEB fading to #FDFDFB by f28, keep a blue floor glow #DBEEFD at the bottom. Header on one line: logo disc ⌀132 (#FBFCFE, 1px rim #E8E8EA, dark mark), the product name (Inter 500), a dark capsule pill "on Whop" (#2F2E2F, white text); the whole lockup spans x474–1063, centre line rises y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), drifting 1 px/frame after. Name appears f2 blurred, pill f4–5 heavily blurred and sliding 15 px left as it sharpens. A light hub window (radius 93, fill #FCFDFF, top band #F1F6FF, blue inner floor glow) fades in around it: opacity 0 to f14, 0.53 f15, 0.7 f19, 1.0 f24; top-left corner (408,405), runs off the right and bottom. Inside: a search pill in the top band, a left icon column (Courses icon at (537,739), faded Chat icon at (537,900)), and a course card from (764,700) off-frame with its cover image, title and "Course · 8 lessons". Cursor (black macOS arrow, white outline, 32x39) appears f27 at (891,393), glides left decelerating to (770,383) f44, rotates to point down-left f47–51 as it dives, lands on the disc's lower right (629,564) f56 → (587,546) f59 → (555,531) f71; grows ×1.55 on hover from f56; a soft ice ring (#D5F3FF → #F7FEFF, outer ⌀174) lights around the disc from f53. Camera zooms about (540,540): 1.0 f46 → 1.2 f60 ease-in-out, holds f61, then eases out accelerating to 1.04 at f71 while the cursor presses (shrinks 15% f69–71).
S2 f72–100, icon + orbit: navy squircle app icon (#294376 → #1E2F52, white mark), 276 px at f72 shrinking ease-out to 178 px by f86, radius 28% of width, on a grey halo disc #E9E9E7 growing ⌀240 (f75) → 326 (f86). Four 92 px squares (radius 26) spin in counter-clockwise, decelerating, and lock into a cross at orbit radius ≈216 by f86: white (1px #E3E8EF edge + faint shadow) left, #2F6BFF top, #3CC8F0 right, #4ED6A0 bottom. f88–100: the icon shrinks accelerating to ≈40 px, the squares slide into a row on its right (white slips behind the icon), blur ramps 0.3 → 6 px.
S3 f101–158, menu bar + prompt: white page above a black laptop bezel band (y425–475, top highlight #686866), a dark navy menu bar (y477–538), wallpaper below = the blue sky gradient with thin white line art (one big circle, two horizontal lines, one vertical, a four-point sparkle at a crossing, soft teal glow top-right). Menu bar right cluster in white: Wi-Fi, battery, toggles, the product mark at x531–584, three ⌀36 dots #2F6BFF / #3CC8F0 / #4ED6A0 at x612, 661, 709, "Mon Jun 22  9:41 AM" 34 px. Enters blurred 3 px and settling by f110. Cursor rises from below (f102), sits on the mark, presses f113–117. Camera pans content right +125 px f115–130 (fastest f118–120). A frosted glass box (white-blue glass over the sky, bright top rim, radius 60) springs out from under the mark f116: width peaks 744 at f126 and settles 726x228 by f138 around x196–922, y568–797. The prompt types from f121 (first legible "Make ") to f150 (complete) at about 1 char/frame with a 1-frame hold every 2–3 chars; caret always on; three white outline icons along the bottom; send button #2F6BFF ⌀51 with a white up arrow. From f136 the whole scene drifts up, accelerating into a whip-tilt (f158 moving ≈25 px/frame, vertical blur ≈6–8 px) while the page tints #E6F4FE over f154–158.
S4 f159–186, answer page: a light course lesson page (breadcrumb, title, body): text column x120, body 47 px Inter 400 grey #BCBCBA, line pitch 58, one key phrase ("frame for frame") in black 600. It arrives smeared and 420 px low, scrolls up with offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), then creeps −6 px by f186. Blur 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE fading to #FDFDFB by f165. A cursor pointing straight up rides the scroll and stops under the key phrase (≈(450,591) f180), then drifts right.
S5 f187–214, card: a white card (x203–878, runs off the bottom) rises over the page: cover image 627x536 inset 24 px, radius 64, a light grabber bar at its top centre, caption semibold 38 px black, sub-caption grey 23 px. Cover top y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), then keeps drifting up ~4 px/frame. Card blur peaks 3.8 px at f189, sharp by f201; the page behind blurs to ≈2.5 px. Exit f207–214: card shrinks ~5% and rises while the whole frame blurs 1 → 7 px; cut at the blur peak.
S6 f215–244, two cards: white page, two stacked cards 538x348 (radius 57, gap 36) centred on x540, top card settling at y168 by f230, bottom at y552. Each: cover art (no text baked into it), a frosted pill top-left ("Module 3" / "Module 5"), a frosted round "•••" top-right, and a huge bold title along the bottom edge made of frosted glass (a blurred, lightened copy of the image clipped to the letters, cut off by the card's bottom edge): "Launch" and "Sound". Both enter blurred 12 px and sharp by f224; the top card enters 8% large and rises from y264; the bottom card rises from y927, staggered behind it. They drift up 3 px/frame f230–238, then accelerate up and blur out into the cut.
S7 f245–300, logo disc: page #FDFDFB, disc ⌀168 #F6F6F6 with the dark mark, rises into the centre (top y569 f245 → 491 f250 → 468 f255 → 456 f269) with a vertical smear on the cut frame, holds still f269–287 (the only frozen stretch), then shrinks accelerating to ⌀123 at f300.
S8 f301–359, end card: black radial background (#020204 corners, ≈#272729 around the word), the wordmark in Inter 600, white #F3F3F5 with a tight glow plus a wide soft halo, centred (540,540). Word width: ≈1650 px f301 (horizontally smeared, zoom streaks) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame shrink) → 492 f350, then collapses ease-in: 450 f355 → 267 f359 with blur rising to 3.5 px. The film ends mid-collapse.

1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.
2. Every value is continuous in the frame number (the 59.94 master renders half frames): animate with keyframe tables kf(frame, [[f, value], ...], ease) and per-frame lookup tables with linear interpolation. No Math.floor on motion.
3. Blur: CSS filter blur for round blur, SVG feGaussianBlur with separate x/y stdDeviation for directional smears. Zoom smear on the end card = 20–30 scaled, faded copies of the word. Frosted glass = a blurred, lightened copy of what's behind, clipped to the shape.
4. Cursor: one SVG macOS arrow (black fill, white outline, soft shadow) with rotation and scale, reused in S1, S3, S4.
5. Sound (no voice), exactly 12.075 s: music at 124 BPM, soft intro, the drop at 2.47 s (beat 5, the f72 cut leads it by 2 frames). Synthesized SFX: soft impact 0.10 s; whooshes peaking at the cuts 2.402, 3.370, 5.305, 10.043 s; transition hits exactly on 6.240 s and 8.175 s; clicks at 2.33 and 3.83 s; very quiet key ticks every ~32 ms over 4.04–5.00 s; a soft shimmer at 10.05 s. Master to −14 LUFS, true peak −1 dBTP, no fade except the last 60 ms.
6. Render with Playwright (one screenshot per frame, fonts loaded first), encode H.264 yuv420p at 60000/1001, mux the audio.

Measure text only after the fonts load. A long product name won't fit where a 5-letter name did: scale the whole lockup (disc gap, name, pill) to fit the span x474–1063, don't let the pill fall off-frame. A white orbit square vanishes on the white page without a 1px edge and a faint shadow. Don't put images with their own text inside the S6 cards, or the glass title doubles up. Keep the cut frames exact even where they don't sit on a beat. Nothing freezes except S7 f269–287. Heavy blur tables can wipe a shape out completely: if a frame looks empty, lower the blur until the shape still reads.

Ask me for the inputs. Then show me 4 stills (f40 header in the window, f86 icon cross, f150 finished prompt, f230 the two cards) before you render the full film.

Подкана, взета от пост @notdwd.