Iris Wipe

How it works

Iris Wipe is an animated entrance & kinetic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Iris Wipe exposes 5 dedicated controls — Ring Hue, Open Speed, Ring Thickness, Iris Center and Hold Closed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Iris Wipe — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Space Grotesk', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  display: inline-block;
  color: hsl(0 0% 96%);
}
.text-effect .fx-iris-text {
  display: inline-block;
  clip-path: circle(0% at 50% 50%);
  animation: text-effect-clip 1.94s cubic-bezier(.32,.94,.2,1) both;
}
.text-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1 / 1;
  width: 3%;
  border: 0.054em solid hsl(44 68% 74% / 0.7);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  opacity: .85;
  pointer-events: none;
  animation: text-effect-ring 1.94s cubic-bezier(.32,.94,.2,1) both;
}
.text-effect:hover .fx-iris-text {
  animation-name: text-effect-clip-r;
}
.text-effect:hover::after {
  animation-name: text-effect-ring-r;
}

@keyframes text-effect-clip {
  0% { clip-path: circle(0% at 50% 50%); }
  11.86% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes text-effect-ring {
  0% { width: 3%; opacity: .85; }
  11.86% { width: 3%; opacity: .85; }
  80% { width: 132%; opacity: 1; }
  100% { width: 172%; opacity: 0; }
}
@keyframes text-effect-clip-r {
  0% { clip-path: circle(0% at 50% 50%); }
  11.86% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes text-effect-ring-r {
  0% { width: 3%; opacity: .85; }
  11.86% { width: 3%; opacity: .85; }
  80% { width: 132%; opacity: 1; }
  100% { width: 172%; opacity: 0; }
}

Related Entrance & Kinetic effects

• Fade In
• Letter Wave
• Stagger Reveal
• Typewriter
• Jelly Wobble