@datalayer/core/lib/components/text-reveal/TextRevealAnimation.module.css

**Datalayer Core**

/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */

@keyframes wipe {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.TextRevealAnimation {
  opacity: 0;
  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
}

.TextRevealAnimation--visible {
  opacity: 1;
}

.TextRevealAnimation,
.TextRevealAnimation--animated {
  width: 100%;
  min-height: 1lh;
  position: relative;
}

.TextRevealAnimation--animated::after {
  content: '';
  display: inline;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--brand-color-accent-primary);
  transform-origin: right;
  animation: wipe var(--brand-animation-duration-extended) forwards var(--brand-animation-easing-default);
  animation-delay: var(--animation-delay);
}