Configuración: Sistema de movemento de puntos laranxas

Pídeme: unha etiqueta curta para o interruptor inicial, unha palabra destacada, unha porcentaxe para o gráfico, o texto para a tarxeta final, unha cor de realce e unha pista cun ritmo claro.

Unha película de deseño de movemento en 2D en 16:9. Usa unha lona branca apagada cálida, fondos case negros, tipografía atrevida e un toque laranxa intenso. O punto laranxa conecta cada escena: comeza na interface de usuario, convértese no punto sobre unha letra, traza un gráfico de resorte, medra nunha forma e volve na tarxeta final. Un cursor fai que o clic inicial pareza real. Mantén o movemento nítido e controlado, con pequenos sobrepasos do resorte e sen tempos mortos.
Prohibido: imaxes de arquivo, gradientes, brillos, explosións de partículas, transicións aleatorias e movemento que non estea conectado a un elemento que xa estea na pantalla.

Arredor de 15 segundos, cun cambio visual en cada ritmo importante.
Abrir: un cursor fai clic no botón laranxa que está xunto a "Reducir movemento". As letras dóbranse e móvense ata que só queda "Movemento", co punto laranxa enriba do "i".
Resorte: o punto salta lonxe da palabra e aterra nun gráfico. A súa traxectoria debuxa unha resposta de resorte, sobrepasa o obxectivo e aséntase xunto a unha chamada de "+22%".
Forma: o punto percorre unha liña, medra ata converterse nun círculo laranxa e enche o cadro. Un cadrado redondeado negro xira dentro del e logo estírase ata formar unha pílula. A escena contráese ata un único punto laranxa sobre fondo negro.
Tipo: palabras como "RESORTES", "ALIVIO", "TIPO CINÉTICO", "3D" e "SON" orbitan o punto. O círculo de tipo ábrese nun campo de pequenos puntos.
Revelar: o campo de semitonos expándese e vólvese negro, revelando a tarxeta final: " Opus 5.5 ", "Deseñador de movemento" e "0 fotogramas clave".
Retorno: o punto laranxa retrocede a través do medio ton, o gráfico e o alternador. Fai coincidir o fotograma final co primeiro para que o vídeo se repita de forma limpa.

1. Un ficheiro HTML, 1920x1080 a 60 fps. Calcula cada elemento visual desde o tempo dentro de seek(t): sen transicións CSS, temporizadores nin estado transportado entre fotogramas.
2. Usa resortes de forma pechada para o interruptor, o punto rebotante e a gráfica. Debuxa a gráfica a partir da mesma función de resorte que move o punto.
3. Anima as letras individualmente para a transformación de "Reducir movemento" a "Movemento". Mantén o punto laranxa unido ao "i" ata que comece o seu salto.
4. Fai que o círculo laranxa, o cadrado xiratorio e a pílula teñan diferentes estados da mesma forma. Conserva a súa posición e movemento en cada transformación.
5. Coloca as palabras en órbita ao longo dun percorrido circular e, a seguir, move as súas letras cara a fóra para pasar o marco á grella de semitonos.
6. Debuxa o semitono como unha grella de puntos cuxos tamaños respondan ao punto laranxa. Deixa que medre máis alá dos bordos do marco antes de revelar a tarxeta final.
7. Sincroniza o clic, a aterraxe do punto, o pico do gráfico, os cambios de forma e o título final cos pulsos medidos. Renderiza un fotograma por pulso para comprobar o ritmo antes da exportación completa.

O gráfico e o punto deben seguir o mesmo movemento ou o resorte parecerá falso. Mantén o acento laranxa consistente en cada escena. Dá tempos separados ao texto de saída e ao de entrada para que as letras non se superpoñan. Cando unha forma encha a pantalla, escálaa máis alá das catro esquinas. Fai coincidir o cursor, o punto e a tipografía no primeiro e no último fotograma para evitar un bucle entrecortado.

Pídeme as entradas e despois móstrame o mapa de ritmos e catro imaxes fixas (activar/desactivar, gráfico, tipo cinético, tarxeta final) antes de crear o vídeo completo.

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.

Solicitude tomada de publicación @ultimaxbt.