luma

A library for creating unified, beautiful shadows.

Usage no npm install needed!

<script type="module">
  import luma from 'https://cdn.skypack.dev/luma';
</script>

README

Luma

A global illumination library from Framer.

API subject to change before version 1.0.

Chat on Discord

Usage

React

Set up a global light.

import { Light } from "luma"

export function App({ children }) {
    return (
        <Light x={-20} y={-40}>
            {children}
        </Light>
    )
}

Cast the light by generating a boxShadow property.

import { useBoxShadow } from "luma"

export function Component() {
    const depth = 10
    const boxShadow = useBoxShadow(depth)

    return <div style={{ boxShadow }} />
}