Circular Heading Flow

This animated circular heading widget combines a large central message with orbit-style pill labels and polished motion details. It is ideal for landing pages, SaaS websites, startup homepages, and campaign sections that need a futuristic statement block with looping in-view animations, SVG icons, and editable text elements.

This widget is a bold, circular hero module with a centered message, orbiting pill labels, and small directional icon accents around the ring. It feels modern and polished, with a calm dark-green background, soft glow effects, and a layout that makes the headline the clear focal point while the surrounding pills add motion and context. The result is a landing-page section that looks premium, slightly futuristic, and very intentional.

What it looks like

Visually, the widget is built around a large circle outline that frames the content without overwhelming it. The main heading sits in the middle, set in large, clean type with a stacked layout that reads like a manifesto or brand statement. Around it, pill-shaped labels are positioned at different points on the orbit, creating a sense of movement and balance, while the small SVG icons add a more refined, designed feel than plain text symbols. The overall look is minimal but energetic, with enough contrast and spacing to feel elegant rather than busy.

Features

The widget includes a central animated heading, several pill buttons/labels, and a circular orbit structure that visually ties everything together. The animation is designed to replay every time the element enters the viewport, which makes it feel alive even as the user scrolls back and forth. The text is editable, the pills are customizable, and the icon elements are now SVG-based, so they scale cleanly and look sharper on all screens. Because the heading is split into animated word blocks, the motion feels more sophisticated and layered than a simple fade-in.

Who it is for

This widget is a strong fit for SaaS startups, product landing pages, eco-tech brands, circular economy campaigns, and creative agencies that want a statement section with personality. It also works well for any brand that wants to communicate a single core message in a memorable way without relying on a full hero image. Designers and developers can use it as a reusable homepage component, a campaign intro block, or a featured section inside a longer scroll experience. It suits brands that want something visually distinctive but still clean, structured, and easy to adapt.

Why it works

The combination of a large central headline and orbiting labels creates immediate hierarchy, so users know where to look first. The circular composition gives the section a strong visual identity, while the repeating in-view animation adds polish without feeling gimmicky. Since the pills and icons are separate from the main headline, the widget stays flexible: it can communicate product states, service categories, or short value statements without needing extra copy blocks.

How to install Circular Heading Flow to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.