Sistemi i lëvizjes me pika portokalli

Më kërkoni: një etiketë të shkurtër për butonin hapës, një fjalë hero, një përqindje për grafikun, tekstin për kartën përfundimtare, një ngjyrë theksi dhe një këngë me një ritëm të qartë.

Një film me dizajn lëvizjeje 2D në 16:9. Përdorni një kanavacë të ngrohtë të bardhë të zbehtë, sfonde pothuajse të zeza, tipografi të theksuar dhe një theks të gjallë portokalli. Pika portokalli lidh çdo skenë: fillon në ndërfaqen e përdoruesit, bëhet pika mbi një shkronjë, gjurmon një grafik sustë, rritet në një formë dhe kthehet në kartën e fundit. Një kursor e bën klikimin hapës të duket real. Mbajeni lëvizjen të mprehtë dhe të kontrolluar, me tejkalime të vogla sustësh dhe pa kohë të vdekur.
Të ndaluara: pamjet filmike, gradientët, shkëlqimet, shpërthimet e grimcave, tranzicionet e rastësishme dhe lëvizja që nuk është e lidhur me një element që është tashmë në ekran.

Rreth 15 sekonda, me një ndryshim vizual në çdo rrahje kryesore.
Hap: një kursor klikon butonin portokalli pranë "Zvogëlo Lëvizjen". Shkronjat përkulen dhe lëvizin në vendin e tyre derisa të mbetet vetëm "Lëvizja", me pikën portokalli mbi "i".
Pranverë: pika largohet nga fjala dhe bie në një grafik. Rruga e saj tërheq një përgjigje si pranverë, tejkalon objektivin dhe vendoset pranë një sinjali "+22%".
Forma: pika kalon nëpër një vijë, rritet në një rreth portokalli dhe mbush kornizën. Një katror i zi i rrumbullakosur rrotullohet brenda saj, pastaj shtrihet në një pilulë. Skena tkurret në një pikë të vetme portokalli mbi të zezë.
Lloji: fjalë si "SPRINGS", "EASING", "KINETIC TYPE", "3D" dhe "SOUND" rrotullohen rreth pikës. Rrethi i llojit hapet në një fushë me pika të vogla.
Zbulo: fusha gjysmëtonale zgjerohet dhe shndërrohet në të zezë, duke zbuluar kartën përfundimtare: " Opus 5.5 ", "Dizajner lëvizjeje." dhe "0 kuadro kyçe".
Kthimi: pika portokalli lëviz prapa përmes gjysmëtonit, grafikut dhe ndërruesit. Përputhni kuadrin e fundit me të parin në mënyrë që videoja të përsëritet qartë.

1. Një skedar HTML, 1920x1080 me 60fps. Llogarit çdo pamje vizuale nga koha brenda seek(t): nuk ka tranzicione CSS, kohëmatës ose gjendje të mbartur midis kornizave.
2. Përdorni susta të mbyllura për ndërruesin, pikën kërcyese dhe grafikun. Vizatoni grafikun nga i njëjti funksion sustë që lëviz pikën.
3. Animoni shkronjat individualisht për transformimin "Reduce Motion" në "Motion". Mbajeni pikën portokalli të bashkangjitur te "i" derisa të fillojë kërcimin e saj.
4. Formoni rrethin portokalli, duke e rrotulluar në katror dhe duke e vendosur pilulën në gjendje të ndryshme të së njëjtës formë. Ruani pozicionin dhe lëvizjen e tij gjatë çdo transformimi.
5. Vendosni fjalët që rrotullohen përgjatë një trajektoreje rrethore, pastaj zhvendosni shkronjat e tyre jashtë për ta kaluar kornizën në rrjetën gjysmëtonale.
6. Vizatoni gjysmëtonin si një rrjetë pikash, madhësia e të cilave i përgjigjet pikës portokalli. Lëreni të rritet përtej skajeve të kornizës përpara se të zbuloni kartën e fundit.
7. Sinkronizoni klikimin, uljen e pikës, kulmin e grafikut, ndryshimet e formës dhe titullin përfundimtar me rrahjet e matura. Renderoni një kuadër për rrahje për të kontrolluar ritmin para eksportimit të plotë.

Grafiku dhe pika duhet të ndjekin të njëjtën lëvizje përndryshe susta do të duket e rreme. Mbajeni theksin portokalli të qëndrueshëm në çdo skenë. Jepini tekstit dalës dhe hyrës kohë të ndarë në mënyrë që shkronjat të mos mbivendosen. Kur një formë mbush ekranin, shkallëzojeni atë përtej të katër cepave. Përputhni kursorin, pikën dhe tipografinë në kuadrin e parë dhe të fundit për të shmangur një ngecje të lakut.

Më pyet për të dhënat hyrëse, pastaj më trego hartën e ritmit dhe katër pamje statike (çaktivizuesin, grafikun, llojin kinetik, kartën e fundit) përpara se të ndërtosh videon e plotë.

Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.

A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.

Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.

1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats. Render one frame per beat to check the pacing before the full export.

The graph and dot must follow the same motion or the spring will feel fake. Keep the orange accent consistent across every scene. Give outgoing and incoming text separate timing so letters don't overlap. When a shape fills the screen, scale it past all four corners. Match the cursor, dot and typography in the first and last frames to avoid a loop stutter.

Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.

Njoftim i marrë nga post @ultimaxbt.