@cattn/hdr

A Svelte library for rendering element colors in HDR.

Installation

npm i @cattn/hdr

Usage

Router

import { HDRRouter } from '@cattn/hdr';

Place in src/+layout.svelte:

<script lang="ts">
	import { HDRRouter } from '@cattn/hdr';
</script>

<!-- This should be at the top of your file! -->
<HDRRouter />

Configuration

Amplification
Adjust HDR intensity across platforms (default 1.8).

<HDRRouter amplification={1.5} />

Delay
Apply an artificial delay before HDR styles (default 0 ms).

<HDRRouter delay={100} />

hdrify

Converts the element's color to HDR.

<script lang="ts">
	import { hdrify } from '@cattn/hdr';
</script>

<h2 style="color: #00ff00" {@attach hdrify()}>The color is in HDR!!</h2>

hdrifyBackground

Converts the element's background-color to HDR.

<script lang="ts">
	import { hdrifyBackground } from '@cattn/hdr';
</script>

<h2 style="background-color: #00ff00" {@attach hdrifyBackground()}>The background is in HDR!!</h2>

hdrifyHex

Pass a $state rune or a hex string to set HDR color dynamically.

<script lang="ts">
	import { hdrifyHex } from '@cattn/hdr';

	let color = $state('#ff006f');
</script>

<h2 {@attach hdrifyHex(color)}>The color is in HDR!!</h2>

hdrifyBackgroundHex

Pass a $state rune or a hex string to set HDR background dynamically.

<script lang="ts">
	import { hdrifyBackgroundHex } from '@cattn/hdr';

	let color = $state('#ff006f');
</script>

<h2 {@attach hdrifyBackgroundHex(color)}>The background is in HDR!!</h2>

setHdrEnabled

Set HDR on or off globally.

<script lang="ts">
	import { setHdrEnabled } from '@cattn/hdr';
</script>

<button on:click={() => setHdrEnabled(false)}>Disable HDR</button>
<button on:click={() => setHdrEnabled(true)}>Enable HDR</button>

enableHDR

Convenience helper to enable HDR globally.

<script lang="ts">
	import { enableHDR } from '@cattn/hdr';
</script>

<button on:click={enableHDR}>Enable HDR</button>

disableHDR

Convenience helper to disable HDR globally.

<script lang="ts">
	import { disableHDR } from '@cattn/hdr';
</script>

<button on:click={disableHDR}>Disable HDR</button>

isHdrEnabled

Read the current HDR state.

<script lang="ts">
	import { isHdrEnabled } from '@cattn/hdr';

	const hdrOn = isHdrEnabled();
</script>

<p>HDR is {hdrOn ? 'enabled' : 'disabled'}.</p>

setLogEnabled

Set logging on or off globally.

<script lang="ts">
	import { setLogEnabled } from '@cattn/hdr';
</script>

<button on:click={() => setLogEnabled(false)}>Disable Logging</button>
<button on:click={() => setLogEnabled(true)}>Enable Logging</button>

enableLog

Convenience helper to enable logging globally.

<script lang="ts">
	import { enableLog } from '@cattn/hdr';
</script>

<button on:click={enableLog}>Enable Logging</button>

disableLog

Convenience helper to disable logging globally.

<script lang="ts">
	import { disableLog } from '@cattn/hdr';
</script>

<button on:click={disableLog}>Disable Logging</button>

isLogEnabled

Read the current logging state.

<script lang="ts">
	import { isLogEnabled } from '@cattn/hdr';

	const logOn = isLogEnabled();
</script>

<p>Logging is {logOn ? 'enabled' : 'disabled'}.</p>

Developing

After npm install, start a development server:

npm run dev

Library code lives in src/lib; demo/tests in src/routes.

Building

To build the library:

npm run build