Effect gallery · a little energy

Interfaces with a pulse.

Six considered recipes for light, depth, and interaction. Tune the details, then take the complete code.

Open the studio

A signature, in motion.

Hover, focus, and play. Every recipe responds to your palette and motion choice.

Motion across previews

Color palette

RECIPE 01

Aurora field

Soft ribbons of light, moving at your pace.

A little atmosphere

Stay curious.

Let a little light lead the way.

Shader

Shader type

Speed20%

Scale1×

Intensity55%

Refine this style in the studio

View complete example

"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">{"A little atmosphere"}</Badge>
        <h1 className="text-4xl font-semibold tracking-tight text-white">{"Stay curious."}</h1>
        <p className="text-sm text-white/75">{"Let a little light lead the way."}</p>
        <Button variant="outline" disabled={false} onClick={() => setPaused((current) => !current)}>
          {paused ? "Resume" : "Pause"}
        </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>
  );
}

RECIPE 02

Prismatic gradient

A wash of color. A precise point of view.

Color with intention

A brighter perspective.

Find a new angle on your next idea.

Color

Gradient type

Angle125°

Intensity55%

Refine this style in the studio

View complete example

"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 with intention"}</Badge>
        <h1 className="text-4xl font-semibold tracking-tight text-white">{"A brighter perspective."}</h1>
        <p className="text-sm text-white/75">{"Find a new angle on your next idea."}</p>
        <Button appearance="gradient" onClick={() => setSelected(true)}>{"Explore color"}</Button>
        {selected && <p role="status" className="text-xs text-white">{"A brighter beginning."}</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>
  );
}

RECIPE 03

Spotlight surface

A gentle light that follows your attention.

The next chapter

Ideas deserve a little energy.

Make every interaction feel considered.

Name your idea

Pointer

Light intensity55%

Spotlight size320 px

Refine this style in the studio

View complete example

"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">{"The next chapter"}</Badge>
        <h1 className="text-2xl font-semibold tracking-tight">{"Ideas deserve a little energy."}</h1>
        <p className="text-sm leading-6 text-muted-foreground">{"Make every interaction feel considered."}</p>
        <label className="grid gap-2 text-xs font-medium">
          {"Name your idea"}
          <Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Something extraordinary…" />
        </label>
        <Button variant="outline" onClick={() => setSelected(true)}>{"Take a closer look"}</Button>
        {selected && <p role="status" className="text-xs text-primary">{"A good beginning."}</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>
  );
}

RECIPE 04

Luminous edge

A fine line of color, quietly in motion.

The next chapter

Ideas deserve a little energy.

Make every interaction feel considered.

Border

Edge width1.5 px

Orbit duration12 s

Refine this style in the studio

View complete example

"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">{"The next chapter"}</Badge>
        <h1 className="text-2xl font-semibold tracking-tight">{"Ideas deserve a little energy."}</h1>
        <p className="text-sm leading-6 text-muted-foreground">{"Make every interaction feel considered."}</p>
        <label className="grid gap-2 text-xs font-medium">
          {"Name your idea"}
          <Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Something extraordinary…" />
        </label>
        <Button variant="outline" onClick={() => setSelected(true)}>{"Take a closer look"}</Button>
        {selected && <p role="status" className="text-xs text-primary">{"A good beginning."}</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>
  );
}

RECIPE 05

Perspective card

A little dimension for a closer look.

The next chapter

Ideas deserve a little energy.

Make every interaction feel considered.

Depth

Tilt angle6°

Perspective900 px

Refine this style in the studio

View complete example

"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">{"The next chapter"}</Badge>
        <h1 className="text-2xl font-semibold tracking-tight">{"Ideas deserve a little energy."}</h1>
        <p className="text-sm leading-6 text-muted-foreground">{"Make every interaction feel considered."}</p>
        <label className="grid gap-2 text-xs font-medium">
          {"Name your idea"}
          <Input value={idea} onChange={(event) => setIdea(event.target.value)} placeholder="Something extraordinary…" />
        </label>
        <Button variant="outline" onClick={() => setSelected(true)}>{"Take a closer look"}</Button>
        {selected && <p role="status" className="text-xs text-primary">{"A good beginning."}</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>
  );
}

RECIPE 06

Magnetic action

An invitation with a little pull.

Follow your curiosity.

An action that meets you halfway.

Action

Pull strength18%

Travel distance10 px

Refine this style in the studio

View complete example

"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>{"An invitation"}</Badge>
        <h1 className="text-3xl font-semibold tracking-tight">{"Follow your curiosity."}</h1>
        <p className="text-sm text-muted-foreground">{"An action that meets you halfway."}</p>
        <MagneticButton asChild strength={0.18} maxDistance={10}>
          <Button appearance="gradient" onClick={() => setSelected(true)}>{"Make your move"}</Button>
        </MagneticButton>
        {selected && <p role="status" className="text-xs text-primary">{"A good beginning."}</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>
  );
}

Pointer effects respond to a mouse or trackpad. Keyboard focus stays clear, and reduced motion keeps the composition calm.