Interfaces que laten. Seis recetas cuidadas de luz, profundidad e interacción. Ajusta los detalles y lleva el código completo.
Una identidad en movimiento. Pasa el cursor, usa el foco y explora. Cada receta responde a tu paleta y tu elección de movimiento.
Paleta de color Aurora Violeta Océano Menta Brasa Rosa RECETA 01
Campo aurora Cintas suaves de luz que se mueven a tu ritmo.
Un poco de atmósfera Mantén la curiosidad. Deja que un poco de luz te guíe.
Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ShaderBackground } from "@/components/effects";
function ShaderBackgroundExample() {
const [paused, setPaused] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<ShaderBackground kind="aurora" colors={["#8B5CF6","#22D3EE","#34D399"]} speed={0.2} scale={1} intensity={0.55} paused={paused || false} className="rounded-2xl p-8">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge variant="outline" className="border-white/25 bg-white/5 text-white">{"Un poco de atmósfera"}</Badge>
<h1 className="text-4xl font-semibold tracking-tight text-white">{"Mantén la curiosidad."}</h1>
<p className="text-sm text-white/75">{"Deja que un poco de luz te guíe."}</p>
<Button variant="outline" disabled={false} onClick={() => setPaused((current) => !current)}>
{paused ? "Reanudar" : "Pausar"}
</Button>
</div>
</ShaderBackground>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "glass",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "none",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "mesh",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "aurora",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredShaderBackgroundExample() {
return (
<AppearanceScope appearance={appearance}>
<ShaderBackgroundExample />
</AppearanceScope>
);
}
RECETA 02
Degradado prismático Una capa de color. Un punto de vista preciso.
Color con intención Una perspectiva más brillante. Encuentra un nuevo ángulo para tu próxima idea.
Explora el color Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { GradientBackground } from "@/components/effects";
function GradientBackgroundExample() {
const [selected, setSelected] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<GradientBackground kind="linear" colors={["#8B5CF6","#22D3EE","#34D399"]} angle={125} intensity={0.55} className="rounded-2xl p-8 [&>.afx-background-field]:[background-image:var(--af-gradient-color)]!">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge variant="outline" className="border-white/25 bg-white/5 text-white">{"Color con intención"}</Badge>
<h1 className="text-4xl font-semibold tracking-tight text-white">{"Una perspectiva más brillante."}</h1>
<p className="text-sm text-white/75">{"Encuentra un nuevo ángulo para tu próxima idea."}</p>
<Button appearance="gradient" onClick={() => setSelected(true)}>{"Explora el color"}</Button>
{selected && <p role="status" className="text-xs text-white">{"Un comienzo más brillante."}</p>}
</div>
</GradientBackground>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "gradient",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "none",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "linear",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "none",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredGradientBackgroundExample() {
return (
<AppearanceScope appearance={appearance}>
<GradientBackgroundExample />
</AppearanceScope>
);
}
RECETA 03
Superficie con foco Una luz suave que sigue tu atención.
Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { SpotlightCard } from "@/components/effects";
function SpotlightCardExample() {
const [idea, setIdea] = useState("");
const [selected, setSelected] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<SpotlightCard spotlightColor="#8B5CF6" intensity={0.33} radius={320} className="p-6">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge variant="outline">{"El próximo capítulo"}</Badge>
<h1 className="text-2xl font-semibold tracking-tight">{"Tus ideas merecen un poco de energía."}</h1>
<p className="text-sm leading-6 text-muted-foreground">{"Haz que cada interacción se sienta cuidada."}</p>
<label className="grid gap-2 text-xs font-medium">
{"Ponle nombre a tu idea"}
<Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Algo extraordinario…" />
</label>
<Button variant="outline" onClick={() => setSelected(true)}>{"Mira más de cerca"}</Button>
{selected && <p role="status" className="text-xs text-primary">{"Un buen comienzo."}</p>}
</div>
</SpotlightCard>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "glass",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "spotlight",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "linear",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "none",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredSpotlightCardExample() {
return (
<AppearanceScope appearance={appearance}>
<SpotlightCardExample />
</AppearanceScope>
);
}
RECETA 04
Borde luminoso Una fina línea de color en suave movimiento.
Tus ideas merecen un poco de energía. Haz que cada interacción se sienta cuidada.
Mira más de cerca Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { GlowBorder } from "@/components/effects";
function GlowBorderExample() {
const [idea, setIdea] = useState("");
const [selected, setSelected] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<GlowBorder colors={["#8B5CF6","#22D3EE","#34D399"]} borderWidth={1.5} duration={12} className="p-6">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge variant="outline">{"El próximo capítulo"}</Badge>
<h1 className="text-2xl font-semibold tracking-tight">{"Tus ideas merecen un poco de energía."}</h1>
<p className="text-sm leading-6 text-muted-foreground">{"Haz que cada interacción se sienta cuidada."}</p>
<label className="grid gap-2 text-xs font-medium">
{"Ponle nombre a tu idea"}
<Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Algo extraordinario…" />
</label>
<Button variant="outline" onClick={() => setSelected(true)}>{"Mira más de cerca"}</Button>
{selected && <p role="status" className="text-xs text-primary">{"Un buen comienzo."}</p>}
</div>
</GlowBorder>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "glow",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "linear",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "none",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredGlowBorderExample() {
return (
<AppearanceScope appearance={appearance}>
<GlowBorderExample />
</AppearanceScope>
);
}
RECETA 05
Tarjeta en perspectiva Un poco de dimensión para mirar más de cerca.
Tus ideas merecen un poco de energía. Haz que cada interacción se sienta cuidada.
Mira más de cerca Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { TiltCard } from "@/components/effects";
function TiltCardExample() {
const [idea, setIdea] = useState("");
const [selected, setSelected] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<TiltCard maxTilt={6} perspective={900} className="p-6">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge variant="outline">{"El próximo capítulo"}</Badge>
<h1 className="text-2xl font-semibold tracking-tight">{"Tus ideas merecen un poco de energía."}</h1>
<p className="text-sm leading-6 text-muted-foreground">{"Haz que cada interacción se sienta cuidada."}</p>
<label className="grid gap-2 text-xs font-medium">
{"Ponle nombre a tu idea"}
<Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Algo extraordinario…" />
</label>
<Button variant="outline" onClick={() => setSelected(true)}>{"Mira más de cerca"}</Button>
{selected && <p role="status" className="text-xs text-primary">{"Un buen comienzo."}</p>}
</div>
</TiltCard>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "tilt",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "linear",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "none",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredTiltCardExample() {
return (
<AppearanceScope appearance={appearance}>
<TiltCardExample />
</AppearanceScope>
);
}
RECETA 06
Acción magnética Una invitación con un poco de atracción.
Sigue tu curiosidad. Una acción que se acerca a ti.
Ver ejemplo completo "use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { MagneticButton } from "@/components/effects";
function MagneticButtonExample() {
const [selected, setSelected] = useState(false);
return (
<main className="mx-auto max-w-lg bg-background p-6 text-foreground">
<Card appearance="elevated" className="p-8 text-center">
<div className="grid min-h-64 justify-items-start gap-5">
<Badge>{"Una invitación"}</Badge>
<h1 className="text-3xl font-semibold tracking-tight">{"Sigue tu curiosidad."}</h1>
<p className="text-sm text-muted-foreground">{"Una acción que se acerca a ti."}</p>
<MagneticButton asChild strength={0.18} maxDistance={10}>
<Button appearance="gradient" onClick={() => setSelected(true)}>{"Da el paso"}</Button>
</MagneticButton>
{selected && <p role="status" className="text-xs text-primary">{"Un buen comienzo."}</p>}
</div>
</Card>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 20,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "magnetic",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "linear",
"angle": 125,
"intensity": 0.55,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "none",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredMagneticButtonExample() {
return (
<AppearanceScope appearance={appearance}>
<MagneticButtonExample />
</AppearanceScope>
);
}
Los efectos de cursor responden al ratón o al panel táctil. El foco del teclado permanece claro y el movimiento reducido mantiene la composición serena.