Texto con apertura de máscara
Un titular se abre desde su eje horizontal mediante clip-path; entrada breve con alternativa estática para movimiento reducido.
Para lo que viene después.
Código completo
Es exactamente el archivo que se descarga. Cópialo a tu proyecto y úsalo.
"use client";
import { type CSSProperties } from "react";
/** Texto con apertura de máscara. React + TypeScript, sin dependencias. Personaliza con variables --gcxo-*. */
export type TextoAperturaProps = {
title?: string;
subtitle?: string;
className?: string;
style?: CSSProperties;
};
const CSS = `
.gcxo-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gcxo-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gcxo-root *, .gcxo-root *::before, .gcxo-root *::after { box-sizing: border-box; }
.gcxo-root button, .gcxo-root input, .gcxo-root textarea, .gcxo-root select { font: inherit; }
.gcxo-root button, .gcxo-root a { -webkit-tap-highlight-color: transparent; }
.gcxo-root :focus-visible { outline: 2px solid var(--gcxo-accent, #25724b); outline-offset: 4px; }
.gcxo-root ::selection { background: var(--gcxo-accent, #25724b); color: #fff; }
.gcxo-root button:disabled { opacity: .5; cursor: not-allowed; }
.gcxo-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gcxo-root *, .gcxo-root *::before, .gcxo-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gcxo-root { width:620px; padding:32px 18px; text-align:center; }
.gcxo-title { color:var(--gcxo-accent,#efecde); font-size:clamp(30px,8vw,70px); font-weight:700; letter-spacing:-.035em; line-height:1; animation:gcxo-open 1.2s cubic-bezier(.16,1,.3,1) both; }
.gcxo-root p { color:#c3c4bc; margin:24px 0 0; font-size:14px; animation:gcxo-caption .8s .2s cubic-bezier(.16,1,.3,1) both; }
@keyframes gcxo-open { from { clip-path:inset(48% 0 48%); transform:translateY(10px); } to { clip-path:inset(0); transform:translateY(0); } }
@keyframes gcxo-caption { from { opacity:.3; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }`;
export function TextoApertura({
title = "HACER ESPACIO",
subtitle = "Para lo que viene después.",
className = "",
style,
}: TextoAperturaProps) {
return (
<div className={`gcxo-root ${className}`} style={style}>
<style>{CSS}</style>
<div className="gcxo-title">{title}</div>
<p>{subtitle}</p>
</div>
);
}
Úsalo en tu proyecto
Instálalo con la CLI de shadcn.
npx shadcn@latest add https://www.gassierconsulting.com/r/texto-aperturaEjemplo de uso de Texto con apertura de máscara
Después de copiar texto-apertura.tsx a tu proyecto, impórtalo y colócalo donde lo necesites.
import { TextoApertura } from "./texto-apertura";
export default function Ejemplo() {
return <TextoApertura title="Ejemplo" />;
}Propiedades de TextoApertura
TextoApertura acepta 4 propiedades: todas son opcionales y tienen un valor por defecto, así que funciona sin configurar nada.
| Propiedad | Tipo | Descripción |
|---|---|---|
title? | string | Opcional. |
subtitle? | string | Opcional. |
className? | string | Opcional. |
style? | CSSProperties | Opcional. |
Personaliza Texto con apertura de máscara con variables CSS
Define estas variables en el contenedor o en tu hoja de estilos para cambiar los colores sin tocar el componente. Si no las defines, se usa el valor por defecto.
| Variable | Valor por defecto |
|---|---|
--gcxo-fg | #202421 |
--gcxo-accent | #25724b |
Accesibilidad y rendimiento
El archivo tiene 43 líneas (2 KB) y define 2 animaciones con @keyframes. Esto es lo que hace Texto con apertura de máscara por quien lo usa:
- Detecta prefers-reduced-motion y baja o quita el movimiento cuando la persona lo pide.
- Muestra un anillo de foco visible al navegar con teclado (:focus-visible).
- Es un componente de cliente de Next.js: incluye la directiva "use client".