OPEN SOURCE • BUILT FOR LUMEN

Give your AI
better building blocks.

A collection of code, effects, components, and design ideas that Lumen can reference to make websites feel less generic and a lot more alive.

This project was made by Jake.

Explore examples ↓ Open Lumen ↗

Scroll to explore

THE IDEA

Don't just tell Lumen what to build.
Show it how good can look.

PLUGIN EXAMPLES

Little pieces.
Big difference.

Copy an effect. Drop it into a plugin. Let Lumen reference it.

01 / TEXT GLOW

Make the type glow.

Subtle light can make a headline feel dramatically more premium without adding visual clutter.

HTML + CSS

<h1 class="glow">Lumen</h1>

<style>
.glow {
  color: white;
  text-shadow:
    0 0 18px rgba(255,255,255,.28),
    0 0 55px rgba(150,120,255,.35);
}
</style>

02 / APPLE REVEAL

Hello.

Scroll-triggered reveal

03 / MAGNETIC BUTTON

04 / GLASS CARD

✦ Designed to float. Blur • depth • light

05 / GRADIENT SHIFT

Fluid gradients.

06 / MOUSE SPOTLIGHT

Move around.

The light follows your cursor.

JAVASCRIPT

const card = document.querySelector(".card");

card.addEventListener("pointermove", (e) => {
  const r = card.getBoundingClientRect();
  card.style.setProperty("--x", `${e.clientX - r.left}px`);
  card.style.setProperty("--y", `${e.clientY - r.top}px`);
});

07 / STAGGERED ENTRANCE

One thing
after another.

Perfect for feature lists, navigation, cards, and full landing pages.

01 Design↗

02 Build↗

03 Animate↗

04 Ship↗

MAKE IT FEEL GOODMAKE IT FEEL GOOD MAKE IT FEEL GOODMAKE IT FEEL GOOD

08 / INFINITE MARQUEE

Motion that
keeps moving.

YOUR TURN

Build something
worth copying.

Create a plugin. Add your best code. Give Lumen something new to learn from.

Open Lumen ↗ See examples ↑

Give your AI better building blocks.

Don't just tell Lumen what to build. Show it how good can look.

Little pieces.Big difference.