Покадрове відео запуску

Запитуйте мене про: назву мого продукту, логотип (або дозвольте вам намалювати просту позначку), однорядковий текст, який користувач вводить у поле запиту, сторінку з відповіддю (заголовок + 2–3 речення з однією ключовою фразою), дві назви функцій для складених карток та музичний трек. Якщо я пропускаю якісь із них, використовуйте значення за замовчуванням: продукт «Кадр за кадром», що знаходиться в його центрі Whop, позначку видошукача (чотири кутові дужки навколо жирного шрифту «FF»), запит «Зробити відео про запуск мого додатка», сторінку уроку під назвою «2.1 Виберіть посилання», картки «Запуск» та «Звук», а також безкоштовний хаус-трек Mixkit «Rising Forest», уповільнений до 124 BPM.

12-секундний квадратний продуктовий скетч, 1080x1080, кількість кадрів 29,97 кадрів/с (f0–f359), майстер-рендеринг 59,94 кадрів/с. Відчуття Apple-keynote: м’який, білий, яскраво-блакитний, скляний. Камера ніколи не обрізає кадр на нерухомому рівні: кожен кадр входить уже рухомим (експоненціальне згасання, 12–19% від відстані, що залишилася на кадр) і виходить на прискореному русі або на рампі розмиття. Розмиття відповідає швидкості та напрямку кожного руху.
Палітра: сторінка #FDFDFB, серпанок #B7CFEB, лід #E6F0FA, насичений синій #294376 → #769CC2 градієнт неба, темно-синій #1E2F52, акцентні сині #2F6BFF / #3CC8F0 / м'ятний #4ED6A0, білий. Тип: Inter (400/500/600/700). Жодних фіолетових, фіолетових, пурпурових чи помаранчевих відтінків.
Історія: заголовок продукту піднімається з блакитного серпанку всередині світлого вікна програми → курсор ковзає всередину, повертається обличчям до місця, куди він летить, збільшується при наведенні курсора та натискає на логотип → різкий зріз на музичному склі, що переходить на значок програми з чотирма квадратами, що обертаються у вигляді хреста → значок згортається в рядок меню Mac → курсор натискає на значок рядка меню, з'являється вікно запиту з матового скла, і запит друкується → різкий нахил вгору крізь світло-блакитний спалах на сторінку відповідей, яка прокручується на місце → над нею піднімається картка → розмиття та розчинення до двох складених карток з гігантськими заголовками з матового скла → розмиття та розчинення до самотнього диска з логотипом → різкий зріз до чорної кінцевої картки зі світним словом.
Заборонено: кросфейди, заморожені кадри (крім одного затриманого в S7), стандартні набори інтерфейсу користувача, світіння тексту інтерфейсу, Math.random, все, що виглядає як шаблон.

Координати – пікселі на сцені 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 піксель/кадр після. Назва виглядає розмитою на f2, пігулка f4–5 сильно розмита та зсувається на 15 пікселів ліворуч під час збільшення різкості. Навколо нього з'являється вікно світлового центру (радіус 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, значок + орбіта: значок програми темно-синього кольору Squircle (#294376 → #1E2F52, біла позначка), 276 пікселів при f72, зменшуються до 178 пікселів на f86, радіус 28% ширини, на сірому диску гало #E9E9E7, що зростає ⌀240 (f75) → 326 (f86). Чотири квадрати по 92 пікселі (радіус 26) обертаються проти годинникової стрілки, сповільнюючись, і фіксуються у хрест на радіусі орбіти ≈216 на f86: білий (1 піксель #E3E8EF край + слабка тінь) ліворуч, #2F6BFF зверху, #3CC8F0 праворуч, #4ED6A0 знизу. f88–100: піктограма зменшується з прискоренням до ≈40 пікселів, квадрати зсуваються в ряд праворуч від неї (білий колір з'являється за піктограмою), розмиття зростає з 0,3 до 6 пікселів.
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 пікселів 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 пікселів/кадр, вертикальне розмиття ≈6–8 пікселів), тоді як сторінка тонується #E6F4FE поверх f154–158.
S4 f159–186, сторінка відповідей: сторінка уроку легкого курсу (хлібні крихти, заголовок, основна частина): колонка тексту x120, основна частина 47 пікселів Inter 400 сірий #BCBCBA, крок між рядками 58, одна ключова фраза ("кадр за кадром") чорним 600. Розмазане та низько розташоване на 420 пікселів, прокручується вгору зі зміщеннями 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), потім повзуче на −6 пікселів на f186. Розмиття 24 пікселів (f159) → 1.5 (f165) → 0. Спалах #E2F4FE з поступовим переходом до #FDFDFB на f165. Курсор, спрямований прямо вгору, рухається по скролу та зупиняється під ключовою фразою (≈(450,591) f180), а потім переміщується праворуч.
S5 f187–214, картка: біла картка (x203–878, стікає знизу) піднімається над сторінкою: зображення обкладинки 627x536 вставка 24 пікселів, радіус 64, світла панель захоплення угорі по центру, підпис напівжирний 38 пікселів чорний, підпідпис сірий 23 пікселів. Верхня частина обкладинки y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), потім продовжує підніматися ~4 пікселі/кадр. Розмиття картки досягає піку 3,8 пікселів при f189, різкість при f201; сторінка позаду розмивається до ≈2,5 пікселів. Вихід f207–214: картка зменшується ~5% і піднімається, тоді як весь кадр розмивається на 1 → 7 пікселів; обрізано на піку розмиття.
S6 f215–244, дві картки: біла сторінка, дві складені картки 538x348 (радіус 57, проміжок 36) з центром на x540, верхня картка розташована на y168 x f230, нижня на y552. Кожна: обкладинка (без запеченого тексту), матова пігулка угорі ліворуч ("Модуль 3" / "Модуль 5"), матовий круглий знак "•••" угорі праворуч та величезний жирний заголовок уздовж нижнього краю, зроблений з матового скла (розмита, освітлена копія зображення, обрізана до літер, обрізана нижнім краєм картки): "Запуск" та "Звук". Обидві розмиті 12 пікселів та різкі на 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 пікселів f301 (розмазано по горизонталі, смуги масштабування) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 піксел/кадр скорочення) → 492 f350, потім згортання поетапне наростання: 450 f355 → 267 f359 з розмиттям, що зростає до 3,5 пікселів. Плівка закінчується посередині згортання.

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 мс протягом 4.04–5.00 с; м'яке мерехтіння на 10.05 с. Майстер до −14 LUFS, справжній пік −1 dBTP, без затухання, крім останніх 60 мс.
6. Рендеринг за допомогою Playwright (один скріншот на кадр, шрифти завантажуються першими), кодування H.264 yuv420p з роздільною здатністю 60000/1001, мультиплексування звуку.

Вимірюйте текст лише після завантаження шрифтів. Довга назва продукту не поміститься туди, де поміститься 5-літерна назва: масштабуйте всю блокування (проміжок диска, назву, таблетку), щоб воно помістилося в проміжок x474–1063, не дозволяйте таблетці випадати за межі кадру. Білий квадрат орбіти зникає на білій сторінці без краю в 1 піксель та слабкої тіні. Не розміщуйте зображення з власним текстом всередину карток 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.