# rtx-on

> Use proper ray traced shadow instead of the boring box-shadow

Latest version **0.27.0** (published 2026-08-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install rtx-on
pnpm add rtx-on
yarn add rtx-on
bun add rtx-on
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.27.0 |
| Published | 2026-08-21 |
| First published | 2023-05-25 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 10 |
| Author | Steren Giannini |
| Maintainers | steren |
| Keywords | raytracing |

## Links

- npm: https://www.npmjs.com/package/rtx-on
- Repository: https://github.com/steren/rtx-on
- Homepage: https://github.com/steren/rtx-on#readme
- Issues: https://github.com/steren/rtx-on/issues
- npm.io page: https://npm.io/package/rtx-on

## Dependencies (1)

- [webgl-path-tracing](https://npm.io/package/webgl-path-tracing.md) ^1.17.0

## Recent versions

- 0.27.0 (latest) — 2026-08-21
- 0.26.0 — 2026-08-19
- 0.25.0 — 2026-08-17
- 0.24.0 — 2026-08-17
- 0.23.0 — 2026-08-16
- 0.22.0 — 2026-08-16
- 0.21.0 — 2026-08-16
- 0.20.0 — 2026-08-15
- 0.17.0 — 2024-12-08
- 0.16.0 — 2024-12-08
- 0.15.0 — 2024-12-08
- 0.13.0 — 2024-12-08
- 0.12.0 — 2024-12-01
- 0.10.0 — 2023-06-12
- 0.9.0 — 2023-06-10
- … 6 more at https://npm.io/package/rtx-on/versions

## README

# RTX: ON

Use proper ray traced shadow instead of the boring box-shadow on your web pages.

![Example of this library on example.com](screenshot.jpg)

## Quickstart

Simply add to your web page:

```html
<script type="importmap">
{
  "imports": {
    "webgl-path-tracing": "https://webgl-path-tracing.steren.fr/webgl-path-tracing.js",
    "sylvester": "https://webgl-path-tracing.steren.fr/sylvester.src.js",
    "rtx-on": "https://rtx-on.steren.fr/rtx-on.js"
  }
}
</script>
<script type="module">
import * as rtx from 'rtx-on';

window.onload = function() {
    rtx.on();
}
</script>
```

See the [examples folder](./examples/) for more examples.

## Local installation

Install the module with `npm install rtx-on`

## API reference

#### `rtx.on({background, raised})`

Turn on the ray traced shadow effect on the provided background elements for the provided raised elements.
Removes any existing box shadow effect.

 * `background` element to apply the effect to, defaults to the entire body.
 * `raised[]` elevated elements, defaults to children of the background element with a box shadow style
 * `disableIfDarkMode`: if `true`, will not apply the effect if the user has dark mode enabled, which dims the light of rtx-on. Defaults to `false`.
 * `forceLightMode`: if `true`, the effect will always apply at full light. Defaults to `false`. Set to `true` if your website does *not* implement dark mode.
 * `moveLightOnClick`: Set to `true` to move the light under the cursor when clicking on the page. Default to false.

Raised elements keep their `border-radius`: a rounded element is rendered as a rounded box, and casts a shadow with rounded corners. The rendered shape has a single radius shared by its four corners, so an element whose corners differ gets their average.

The scene is rendered through an orthographic camera, so a raised element covers exactly the rectangle of the element it stands for, wherever that element sits on the page: being raised neither enlarges it nor turns its sides towards the viewer.

#### `rtx.off()`

Turn off the ray traced shadow effect.
Restores any existing box shadow effect.

#### `rtx.button()`

Display an RTX ON/OFF button on the page. For fun.

## Acknowledgements

This module uses [webgl-path-tracing](https://webgl-path-tracing.steren.fr/), a WebGL path tracing library developed in 2010 by [Evan Wallace](https://madebyevan.com/) and later updated by the author of this module.

---
_Source: https://npm.io/package/rtx-on · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._