Skip to main content
assetsforwordpress
MENU ASSETS

Bouncing Circular Text

Bouncing Circular Text is a text component that arranges your message in a circle and keeps it in constant motion: the ring spins on itself while traveling around the container, and when it reaches the edges, the letters compress against the wall and spring back. Text, colors, sizes, speed, and bounce behavior can all be adjusted to fit your design.

It also respects your visitors’ accessibility preferences: when “reduce motion” is enabled on their device, the animation stays still automatically.

Note that it’s purely decorative: the text is rendered with JavaScript and isn’t part of the DOM, so it won’t be readable by search engines or screen readers.

Instructions

This H1 Is Doing Its Best

It heard it needed to be "bold and punchy." It's trying so hard.

Scroll Down. We Dare You

The twist is a footer.

New Hero Section Solves Everything

The rest of the site remains a broken, neglected wasteland.

Client Wants It Pop

They have provided no further direction, but they will know it when they see it.

Instructions

Open the JS script in the Supa Code Block element and edit the options at the end of the script. Each option is explained below:

Content & styling

  • text – The string that gets laid out in a circle. Every character (including spaces) becomes its own span, spaced evenly around the ring at 360 / text.length degrees apart. Repeating a phrase like "BUY NOW • " with a trailing space keeps the loop seamless.
  • fontSize – Font size in pixels for each character.
  • color – Text color (CSS color value).
  • fontFamily – CSS font-family stack used for the characters.
  • fontWeight – CSS font weight (e.g. 400, 700).
  • background – Optional background applied to the container element itself. If empty/omitted, the container's own existing background stays untouched.

Geometry

  • radius – Radius of the circle in pixels; the distance from the ring's center point to each character.

Spin

  • speed – Rotation speed in degrees per second.
  • direction – Sign of the rotation: positive spins clockwise, negative (e.g. -1) spins counter-clockwise. It's a multiplier, so 2 would double the effective speed.

Movement / animation

  • animation – Which motion the whole ring does. "bounce" = vertical bouncing, "slide" = horizontal movement back and forth between the walls, "both" = bounce + slide together, "none" = fully static (positioned via posX/posY). Any other value just centers the ring statically.
  • height – Bounce height in pixels: how far above its lowest point the ring rises on each bounce (clamped to whatever clearance actually fits in the container).
  • vSpeed – Vertical bounce rate in cycles per second. 1 = one full up-and-down bounce per second; higher values bounce faster.
  • hSpeed – Horizontal sliding speed in pixels per second (used only for "slide" / "both").
  • posX – Horizontal position of the ring's center as a percentage (0–100) of the container width. Only used when animation is "none".
  • posY – Same thing vertically, as a percentage of container height. Only used when animation is "none".

Edge behavior (the "squish")

  • squishDepth – How many pixels the ring's center is allowed to push past the container walls. Because each character's bounding box is clamped inside the container, this makes the letters bunch up/compress against the edge instead of cleanly stopping — that's the squish effect. 0 = the ring stops flush at the walls with no distortion.
  • wallInset – A restraint on the squish. It's subtracted from squishDepth (effective press = squishDepth − wallInset), so raising it pulls the ring further from the walls. If it's ≥ squishDepth, the squish is disabled entirely.

Accessibility

  • respectReducedMotion – If true, the scroller checks the user's system "prefers-reduced-motion" setting and won't animate at all in that case (it stays statically centered). Set to false if you want the animation to run regardless of that OS-level preference.

Two notes about your specific call:

  • Since you set animation: "bounce", the options hSpeed, posX, and posY are currently doing nothing (they only matter for "slide"/"both" and "none" respectively).
  • squishDepth: 70 with wallInset: 0 lets the ring press up to 70px past the walls, so during a bounce you'll see fairly heavy bunching of letters at the top and bottom edges — reduce it if that looks too aggressive.