Keep the star still and let the words flow

Describe three layers before choosing the motion

Treat a badge as one object and a revision can turn into a request to rotate it more slowly. Here, the important choice was the target of the motion: a stationary star outline, stationary central copy and English text travelling around the outside. Each layer needed a description that the implementation could follow.

The first arrangement kept the central copy upright inside a rotating shape. The follow-up removed the shape’s rotation too. Recording that change helps the next person avoid restoring an effect that was deliberately removed.

Give the visible shape and the text their own paths

The current generator defines separate paths for the visible star and the surrounding text. It retains the star’s outline while placing the text route slightly farther out and softening its corners. Motion changes the text’s starting position along that route.

This separation addresses a specific tradeoff. Letters can crowd where a path turns sharply. Rounding the visible star to solve that problem would also change the form the request wanted to preserve. The correction instead adjusted the route taken by the letters. Its scale and corner interpolation values belong to this example; another shape or typeface needs its own assessment.

At the briefing stage, distinguish a rotating star, text travelling around a star and a rotating circular label. They produce different results. Establishing whether the form stays fixed and whether the letters follow the direction of a path makes the intended motion much easier to discuss.

Two text runs meet at the loop’s seam

A closed route still has a beginning and an end in the text layout. This implementation places two copies of the wording in separate text elements, each containing a textPath. One startOffset travels from −100% to 0%; the other travels from 0% to 100%. The second run is intended to fill the space left by the first.

The correction record includes a failure in which only one copy moved and the words overlapped. The current code calls beginElement for both animations in the same start routine, rather than relying solely on one animation’s start event to launch the other. A started flag prevents repeated state notifications from starting them again.

Those are the inspected mechanics and the recorded fix. They do not establish that every moment of the loop looks continuous. Watch a complete cycle for gaps, overlapping text and jumps on restart. Two still samples show only part of that behaviour.

Measure the actual words before distributing the space

The fitting method changed too. The runtime measures an invisible, straight text sample. If a phrase is longer than the route, it adjusts the font size, determines how many repetitions fit and distributes the remaining length through letter-spacing. Both text runs receive the same result. It measures again after fonts are ready.

A source comment records uneven spacing when textLength was applied to the animated textPath. This version removes that attribute and uses measured width with letter-spacing. That is the reason recorded for this implementation, rather than a claim about every browser.

Fitting and readability still need separate attention. Central copy also shrinks to fit its box, but continually shrinking a long explanation can make the message harder to read. Keep essential conditions in the page and edit the badge down to a short phrase. Changing the words means checking the spacing and seam again.

Reserve the space the headline is about to occupy

Correcting the motion does not resolve placement on the photograph. The current code reads the boundaries of the header, headline and lower controls to find room for the stars. While a headline enters, it considers both its current bounds and its settled position. It also accounts for the lower contact area’s position during and after its entrance.

The implementation leaves a gutter, reduces the badge to the available space and hides it if even the minimum size cannot fit. Its 16px gutter and 80px minimum belong to this layout. A different page needs its actual title length, font, image height and control transitions assessed.

Hiding decoration is acceptable only when essential information survives elsewhere. If a badge alone contains a required condition or next action, removing it also removes information. My application criterion is whether the title, explanation and contact route still make sense with the decoration absent.

Handle reduced motion in the code that starts it

The edge text in this version uses SVG animation. Its runtime checks prefers-reduced-motion and does not start the animations when reduction is selected initially. When the preference changes during use, it ends or starts both animations. Removing a CSS rotation from the shape does not by itself implement that behaviour.

The existing test uses a simulated DOM and animation objects to check initial stopping, starting both runs, preventing duplicate starts, ending and restarting. It is separate from changing the actual operating-system setting and observing a browser. The latter is not established by that test record.

If the moving words are supporting decoration, the page must still explain the message when they stop. In the applied screen, check that the same essential information is available in the page and that the stationary text does not cover other copy.

Read the corrections alongside the limits of the checks

For this revision I inspected the generator, styles, runtime, existing tests and completion records. I did not rerun the original program or its tests. The hashes of the three current implementation files matched the later completion record. That new evidence belongs in a revision of the existing article, whose earlier rotation description should not remain an account of the current implementation.

An older record also preserves a text-escaping test failure: its selector did not retrieve the intended SVG text, and the output and selection target were examined before the check was corrected. The later motion record separately identifies the single moving run and crowded corners. A test-selection problem, an animation-start problem and a visual-spacing problem needed their own diagnoses.

A separate screen-review report compares an initial sample and another about five seconds later in desktop and mobile frames. Within those samples, the central copy appeared stationary while the surrounding English text changed position; the report also examined clearance from the headline and lower controls. A separate local response-hash record addresses the differing revision labels shown in the mobile frame.

That scope does not cover every video frame, an exact zero-second view, physical phones, all browsers or the actual OS preference interface. Nor is this article a newly performed screen review. Recording what remains unchecked lets the next reviewer choose where to begin.

Checks before using the effect on another page

On another page, first decide what stays still and what moves. Fit the new words using the actual font, then check clearance as the headline and buttons enter.

The reusable hosting paths discussed in the source chat were proposals; the component had not been uploaded there. Adapting asset addresses for a subdirectory was also left as follow-up work. Distinguish the inspected local implementation from a hosted shared component. Preserve the working package, compare the revision and verify its applied behaviour before replacement.

1. Assign the fixed and moving roles of the outline, central copy and edge text separately.
2. Refit the actual words and font, then inspect the seam through a complete cycle.
3. Check headline and lower-control entrances, including narrow and short viewports.
4. Check reduced motion both from initial load and after changing the preference.
5. Confirm that essential information and the next action survive without the decoration, and record the checked version and remaining scope.