diff --git a/README.md b/README.md
index 9661d27..f2398a9 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Svelte Reveal is a library created with the purpose of helping [Svelte](https://
## Documentation
-The documentation is available [here](./packages/svelte-reveal/README.md).
+You can find full documentation on [svelte-reveal.dev](https://svelte-reveal.dev).
## Monorepo
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..6240da8
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..503ebfe
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,12 @@
+# Svelte Reveal - Docs
+
+[](https://starlight.astro.build)
+
+This Astro project is the documentation for Svelte Reveal.
+
+## Local development
+
+In order to locally develop this project you need to:
+
+1. Run `npm install` to install the dependencies
+2. Run `npm run dev` to start the local dev server at `localhost:4321`
\ No newline at end of file
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
new file mode 100644
index 0000000..5fa0b05
--- /dev/null
+++ b/docs/astro.config.mjs
@@ -0,0 +1,31 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'Svelte Reveal',
+ social: {
+ github: 'https://github.com/davekeehl/svelte-reveal'
+ },
+ editLink: {
+ baseUrl: 'https://github.com/davekeehl/svelte-reveal/edit/main/docs/'
+ },
+ sidebar: [
+ {
+ label: 'Start Here',
+ autogenerate: { directory: 'start-here' }
+ },
+ {
+ label: 'Reference',
+ autogenerate: { directory: 'reference' }
+ }
+ ],
+ customCss: [
+ // Relative path to your custom CSS file
+ './src/styles/custom.css'
+ ]
+ })
+ ]
+});
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..eff596a
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "docs",
+ "type": "module",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro check && astro build",
+ "preview": "astro preview",
+ "astro": "astro",
+ "clean": "rimraf .astro .turbo node_modules package-lock.json dist"
+ },
+ "dependencies": {
+ "@astrojs/check": "^0.5.10",
+ "@astrojs/starlight": "^0.21.4",
+ "astro": "^4.3.5",
+ "rimraf": "^5.0.5",
+ "sharp": "^0.32.5",
+ "typescript": "^5.4.4"
+ }
+}
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
new file mode 100644
index 0000000..cba5ac1
--- /dev/null
+++ b/docs/public/favicon.svg
@@ -0,0 +1 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/assets/hero_img_light.svg b/docs/src/assets/hero_img_light.svg
new file mode 100644
index 0000000..e0c33c1
--- /dev/null
+++ b/docs/src/assets/hero_img_light.svg
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/assets/ogImage.svg b/docs/src/assets/ogImage.svg
new file mode 100644
index 0000000..b36a577
--- /dev/null
+++ b/docs/src/assets/ogImage.svg
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
new file mode 100644
index 0000000..414c5da
--- /dev/null
+++ b/docs/src/content/config.ts
@@ -0,0 +1,6 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+ docs: defineCollection({ schema: docsSchema() })
+};
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
new file mode 100644
index 0000000..8f88adc
--- /dev/null
+++ b/docs/src/content/docs/index.mdx
@@ -0,0 +1,41 @@
+---
+title: Simple scroll based animations for Svelte
+description: Svelte Reveal is your go-to library for adding simple scroll based animations to your Svelte apps.
+template: splash
+hero:
+ tagline: Svelte Reveal is your go-to library for adding simple scroll based animations to your Svelte apps.
+ image:
+ dark: ../../assets/hero_img_dark.svg
+ light: ../../assets/hero_img_light.svg
+ actions:
+ - text: Get started
+ link: /start-here/getting-started/
+ icon: right-arrow
+ variant: primary
+ - text: View on GitHub
+ link: https://github.com/davekeehl/svelte-reveal
+ icon: external
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+
+
+ Get started really fast with just a few lines of code.
+
+
+ Creating custom transitions with Svelte Reveal is a breeze .
+
+
+ Built from the ground up for maximum type safety.
+
+
+ We spent a lot of time documenting every bit possible.
+
+
+ Built-in support for the Intersection Observer API.
+
+
+ Need full control? We got you covered.
+
+
diff --git a/docs/src/content/docs/reference/api.mdx b/docs/src/content/docs/reference/api.mdx
new file mode 100644
index 0000000..d3c7b20
--- /dev/null
+++ b/docs/src/content/docs/reference/api.mdx
@@ -0,0 +1,261 @@
+---
+title: API
+sidebar:
+ order: 3
+---
+
+import { Steps, Aside } from '@astrojs/starlight/components';
+
+
+ If you want to customise the behavior of a single DOM node, you are supposed to use [options](/reference/options).
+
+
+Svelte Reveal also exposes several functions you can call to change the [default options](https://github.com/DaveKeehl/svelte-reveal/blob/main/packages/svelte-reveal/src/internal/default/options.ts) and [global configuration](https://github.com/DaveKeehl/svelte-reveal/blob/main/packages/svelte-reveal/src/internal/default/config.ts) of this library. Since these functions operate on a global level across all components using Svelte Reveal, you are supposed to only call them from a single file, otherwise you'll keep overriding the default options and global config from multiple points.
+
+## `setOnce`
+
+**signature**: `(once: boolean) => RevealConfig`
+
+Sets the reveal animations activation status on page reload.
+
+```svelte
+
+
+Hello world
+```
+
+## `setDeviceStatus`
+
+**signature**: `(device: Device, status: boolean) => RevealConfig`
+
+Sets the status of a device.
+
+```svelte
+
+
+Hello world
+```
+
+## `setDevicesStatus`
+
+**signature**: `(devices: Device[], status: boolean) => RevealConfig`
+
+Sets the status of multiple devices.
+
+```svelte
+
+
+Hello world
+```
+
+## `setDeviceBreakpoint`
+
+**signature**: `(device: Device, breakpoint: number) => RevealConfig`
+
+Sets the breakpoint of a device.
+
+```svelte
+
+
+Hello world
+```
+
+## `setDevice`
+
+**signature**: `(device: Device, settings: DeviceConfig) => RevealConfig`
+
+Sets the settings of a device.
+
+```svelte
+
+
+Hello world
+```
+
+## `setResponsive`
+
+**signature**: `(responsive: Responsive) => RevealConfig`
+
+Updates how responsiveness is handled by the library.
+
+```svelte
+
+
+Hello world
+```
+
+## `setObserverRoot`
+
+**signature**: `(root: Element | Document | null) => IntersectionObserverConfig`
+
+Sets the Intersection Observer `root` element.
+
+```svelte
+
+
+Hello world
+```
+
+## `setObserverRootMargin`
+
+**signature**: `(rootMargin: string) => IntersectionObserverConfig`
+
+Sets the Intersection Observer `rootMargin` property.
+
+```svelte
+
+
+Hello world
+```
+
+## `setObserverThreshold`
+
+**signature**: `(threshold: number) => IntersectionObserverConfig`
+
+Sets the Intersection Observer `threshold` property.
+
+```svelte
+
+
+Hello world
+```
+
+## `setObserverConfig`
+
+**signature**: `(observerConfig: IntersectionObserverConfig) => IntersectionObserverConfig`
+
+Sets the Intersection Observer configuration.
+
+```svelte
+
+
+Hello world
+```
+
+## `setConfig`
+
+**signature**: `(userConfig: RevealConfig) => RevealConfig`
+
+Updates the library global configuration.
+
+```svelte
+
+
+Hello world
+```
+
+## `setDefaultOptions`
+
+**signature**: `(options: RevealOptions) => RevealOptions`
+
+Updates the default options to be used for the reveal effect.
+
+```svelte
+
+
+Hello world
+```
diff --git a/docs/src/content/docs/reference/global-config.mdx b/docs/src/content/docs/reference/global-config.mdx
new file mode 100644
index 0000000..208e8d2
--- /dev/null
+++ b/docs/src/content/docs/reference/global-config.mdx
@@ -0,0 +1,105 @@
+---
+title: Global Config
+tableOfContents:
+ maxHeadingLevel: 5
+sidebar:
+ order: 2
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+Some options only make sense at a global level, rather than at a single reveal instance, such as responsiveness handling. Here, you can learn about global configuration options and how to leverage them to fine-tune the reveal experience to your liking.
+
+## `once`
+
+**type**: `boolean`Hello world
+```
+
+### `root`
+
+**type**: `Element | Document | null` Hello world
+```
+
+### `rootMargin`
+
+**type**: `string`Hello world
+```
+
+### `threshold`
+
+**type**: `number`Hello world
+```
+
+### `preset`
+
+**type:** ["fade"](#fade) | ["slide"](#slide) | ["fly"](#fly) | ["spin"](#spin) | ["blur"](#blur) | ["scale"](#scale)Hello world
+```
+
+### `reset`
+
+**type**: `boolean`
+ Overusing this option prevents the Intersection Observer to stop observing the target node. Performance is therefore
+ not guaranteed when many elements have `reset` set to `true`.
+
+
+When set to `true`, the node transitions out when out of view, and is revealed again when back in view.
+
+```svelte
+
+
+Hello world
+```
+
+### `duration`
+
+**type**: `number`Hello world
+```
+
+### `delay`
+
+**type**: `number`Hello world
+```
+
+### `easing`
+
+**type**: [`Easing`](https://github.com/DaveKeehl/svelte-reveal/blob/main/packages/svelte-reveal/src/internal/types/easing.ts)Hello world
+```
+
+### `x`
+
+**type**: `number`Hello world
+```
+
+### `y`
+
+**type**: `number`Hello world
+```
+
+### `rotate`
+
+**type**: `number`Hello world
+```
+
+### `opacity`
+
+**type**: `number`Hello world
+```
+
+### `blur`
+
+**type**: `number`Hello world
+```
+
+### `scale`
+
+**type**: `number`Hello world
+```
+
+## Callbacks
+
+Here is a list of all the event callbacks we expose that you can hook into.
+
+### `onRevealStart`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the node starts being revealed.
+
+```svelte
+
+
+ alert('Reveal: start') }}>Hello world
+```
+
+### `onRevealEnd`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the node is fully revealed.
+
+```svelte
+
+
+ alert('Reveal: end') }}>Hello world
+```
+
+### `onResetStart`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the` reset` option is set to `true` and the node starts transitioning out.
+
+```svelte
+
+
+ alert('Reset: start') }}>Hello world
+```
+
+### `onResetEnd`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the `reset` option is set to `true` and the node has fully transitioned out.
+
+```svelte
+
+
+ alert('Reset: end') }}>Hello world
+```
+
+### `onMount`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the node is mounted on the DOM.
+
+```svelte
+
+
+ alert('Mounting') }}>Hello world
+```
+
+### `onUpdate`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the action options are updated.
+
+```svelte
+
+
+ alert('Updating') }}>Hello world
+```
+
+### `onDestroy`
+
+**signature**: `(node: HTMLElement) => void`
+
+Function that gets fired when the node is unmounted from the DOM.
+
+```svelte
+
+
+ alert('Destroying') }}>Hello world
+```
+
+## Presets
+
+All presets have the `"fade"` preset backed in
+
+Presets are sets of options with predefined values, packaged under a name to achieve a certain transition effect. The following table shows the presets that come bundled with Svelte Reveal and which options they map to.
+
+### `fade`
+
+The element fades in gracefully.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+```
+
+
+
+
+```css
+opacity: 1;
+```
+
+
+
+
+### `fly`
+
+The element fades in and moves along a translation on the y-axis.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+ y: -20;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+transform: translateY(-20px);
+```
+
+
+
+
+```css
+opacity: 1;
+transform: translateY(0px)
+```
+
+
+
+
+### `slide`
+
+The element fades in and performs a translation on the x-axis.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+ x: -20;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+transform: translateX(-20px);
+```
+
+
+
+
+```css
+opacity: 1;
+transform: translateX(0px)
+```
+
+
+
+
+### `blur`
+
+The element fades in and becomes unblurred.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+ blur: 2;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+filter: blur(2px);
+```
+
+
+
+
+```css
+opacity: 1;
+filter: blur(0px)
+```
+
+
+
+
+### `scale`
+
+The element fades in and gets to the original size.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+ scale: 0.8;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+transform: scale(0.8);
+```
+
+
+
+
+```css
+opacity: 1;
+transform: scale(1);
+```
+
+
+
+
+### `spin`
+
+
+ In order to use this transition it is required to use the `width` CSS property on the element to reveal. If you are
+ not already using this property for other things, you can use set it to `width: fit-content`.
+
+
+The element fades in and gets to the original rotation degree.
+
+#### Mapped options
+
+```typescript
+{
+ opacity: 0;
+ rotate: -10;
+}
+```
+
+#### Resulting CSS
+
+
+
+
+```css
+opacity: 0;
+transform: rotate(-10);
+```
+
+
+
+
+```css
+opacity: 1;
+transform: rotate(0);
+```
+
+
+
diff --git a/docs/src/content/docs/start-here/example.mdx b/docs/src/content/docs/start-here/example.mdx
new file mode 100644
index 0000000..112c150
--- /dev/null
+++ b/docs/src/content/docs/start-here/example.mdx
@@ -0,0 +1,11 @@
+---
+title: Example
+sidebar:
+ order: 2
+tableOfContents: false
+---
+
+
diff --git a/docs/src/content/docs/start-here/getting-started.mdx b/docs/src/content/docs/start-here/getting-started.mdx
new file mode 100644
index 0000000..813314c
--- /dev/null
+++ b/docs/src/content/docs/start-here/getting-started.mdx
@@ -0,0 +1,105 @@
+---
+title: Getting Started
+sidebar:
+ order: 1
+---
+
+import { Steps, Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+Svelte Reveal is a library created with the purpose of helping [Svelte](https://svelte.dev/) users add reveal on scroll animations to their web applications in the easiest way possible. This library leverages the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in order to know when to trigger the animations.
+
+## Installation
+
+
+
+
+
+```sh
+npm i -D svelte-reveal
+```
+
+
+
+
+
+```sh
+pnpm i -D svelte-reveal
+```
+
+
+
+
+
+```sh
+yarn add -D svelte-reveal
+```
+
+
+
+
+
+```sh
+bun add -D svelte-reveal
+```
+
+
+
+
+
+## Usage
+
+
+ Using [SvelteKit](https://kit.svelte.dev/)? Please refer to the ["SvelteKit"](/start-here/sveltekit) section.
+
+
+
+
+1. Import the library in your Svelte component:
+
+ ```svelte
+
+ ```
+
+2. Add the imported `reveal` action to the DOM element you want to transition:
+
+ ```svelte
+ // App.svelte
+ Hello world
+ A paragraph
+ ```
+
+ If you want to use the action on a Svelte component, you need to pass the reveal options via props:
+
+ ```svelte
+
+
+ Hello world
+ ```
+
+ ```svelte
+
+
+
+
+ ```
+
+
+
+## Rationale
+
+If you happened to scout the internet for other similar libraries, you might have noticed that other authors have decided to create their own library using Svelte [slots](https://svelte.dev/docs#template-syntax-slot) (similar to [React children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)). There is nothing wrong with that approach, but in my opinion it goes a bit against one of Svelte's core purpose: writing more concise code. Having to wrap every to-be-transitioned component adds at least 2 extra lines of code each time, making your files unnecessarily bloated for such a simple add-on.
+
+You might have also noticed people adding event listeners to the window object in order to transition elements, but in terms of performance it [doesn't scale very well](https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6).
+
+Instead, I decided to use Svelte [actions](https://svelte.dev/docs#template-syntax-element-directives-use-action), which are functions you can attach to a DOM element and that allow you to get access to that particular element and hook into its lifecycle. They take up considerably fewer lines of code, and so far I haven't encountered any big obstacle or performance drawback. Morever, this library is backed by the Intersection Observer API, which is great for performance.
diff --git a/docs/src/content/docs/start-here/sveltekit.mdx b/docs/src/content/docs/start-here/sveltekit.mdx
new file mode 100644
index 0000000..16ebc02
--- /dev/null
+++ b/docs/src/content/docs/start-here/sveltekit.mdx
@@ -0,0 +1,54 @@
+---
+title: SvelteKit
+sidebar:
+ order: 4
+---
+
+import { Steps, Aside } from '@astrojs/starlight/components';
+
+
+ This is an active area of research. Please [submit a bug
+ report](https://github.com/DaveKeehl/svelte-reveal/issues/new) in case of issues.
+
+
+Since Svelte actions were conceived to operate in a client-side environment, they don't always work 100% in SvelteKit and SSR (server-side rendering) out of the box. Svelte Reveal is no exception, as it needs DOM access, and in order not to incur in weird animation behaviors some small setup is required by the end-users. Out of the following two methods, pick the one that most suit your project requirements.
+
+## Without SSR
+
+If your page doesn't need to be server-side rendered then the fix is very trivial. Turn off `ssr` in your `+page.ts` file as follows.
+
+```typescript
+// page.ts
+export const ssr = false;
+```
+
+## With SSR
+
+If your page does need to leverage server-side rendering, the setup remains easy but it requires a few more steps.
+
+
+
+1. Import the bundled stylesheet in your page or layout
+
+ ```svelte
+
+
+ ...
+ ```
+
+2. Add the `sr__hide` css class to every element targeted by Svelte Reveal with `use:reveal`. This will prevent the elements to flicker as soon as the page is hydrated and the DOM is accessible to the library.
+
+ ```svelte
+
+
+ Hello world
+ ```
+
+
diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts
new file mode 100644
index 0000000..acef35f
--- /dev/null
+++ b/docs/src/env.d.ts
@@ -0,0 +1,2 @@
+/// Hello world
- A paragraph
- ```
-
- If you want to use the action on a Svelte component, you need to pass the reveal options via props:
-
- ```svelte
- // App.svelte
-
-
-
- Hello world
- ```
-
- ```svelte
- // Heading.svelte
-
-
-
-
-
- ```
-
- Using [SvelteKit](https://kit.svelte.dev/)? Please refer to the ["SvelteKit"](#sveltekit) section.
-
-## Why Svelte Reveal
-
-If you happened to scout the internet for other similar libraries, you might have noticed that other authors have decided to create their own library using Svelte [slots](https://svelte.dev/docs#template-syntax-slot) (similar to [React children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)). There is nothing wrong with that approach, but in my opinion it goes a bit against one of Svelte's core purpose: writing more concise code. Having to wrap every to-be-transitioned component adds at least 2 extra lines of code each time, making your files unnecessarily bloated for such a simple add-on.
-
-You might have also noticed people adding event listeners to the window object in order to transition elements, but in terms of performance it [doesn't scale very well](https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6).
-
-Instead, I decided to use Svelte [actions](https://svelte.dev/docs#template-syntax-element-directives-use-action), which are functions you can attach to a DOM element and that allow you to get access to that particular element and hook into its lifecycle. They take up considerably fewer lines of code, and so far I haven't encountered any big obstacle or performance drawback. Morever, this library is backed by the Intersection Observer API, which is great for performance.
-
-## SvelteKit
-
-> ⚠️ This is an active area of research. Please [submit a bug report](https://github.com/DaveKeehl/svelte-reveal/issues/new) in case of issues.
-
-> 📅 Last update: April 2024
-
-Since Svelte actions were conceived to operate in a client-side environment, they don't always work 100% in SvelteKit and SSR (server-side rendering) out of the box. Svelte Reveal is no exception, as it needs DOM access, and in order not to incur in weird animation behaviors some small setup is required by the end-users. Out of the following two methods, pick the one that most suit your project requirements.
-
-### Without SSR
-
-If your page doesn't need to be server-side rendered then the fix is very trivial. Turn off `ssr` in your `+page.ts` file as follows.
-
-```typescript
-// +page.ts
-export const ssr = false;
-```
-
-### With SSR
-
-If your page does need to leverage server-side rendering, the setup remains easy but it requires a few more steps.
-
-1. Import the bundled stylesheet in your page or layout
- ```svelte
- // +layout.svelte
-
-
-
- ...
- ```
-
-2. Add the `sr__hide` css class to every element targeted by Svelte Reveal with `use:reveal`. This will prevent the elements to flicker as soon as the page is hydrated and the DOM is accessible to the library.
- ```svelte
- // +page.svelte
-
-
-
- Hello world
- ```
-
-## Options
-
-Depending on the use case, you can either use this library as-is (which applies some [default options](./src/internal/default/options.ts)), or customize it to your liking. If you choose to do so, you can pass an object to this action containing your own options to be applied.
-
-Keep in mind that these options are applied to the single DOM element you add Svelte Reveal to. For global and more in-depth settings, refer to the [API](#api) section.
-
-| Name | Type | Default | Description |
-| ---------- | --------------------------- | ------------------- | ------------------------------------------------------------ |
-| `disable` | `boolean` | `false` | When set to false, the transition is disabled for the target element. |
-| `root` | `Element \| Document \| null` | `null` | The [root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) element used by the Intersection Observer. |
-| `rootMargin` | `string` | `"0px 0px 0px 0px"` | The [root margin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) property of the Intersection Observer. |
-| `threshold` | `number` | `0.6` | The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) (in percentage from `0.0` to `1.0`) property used by the Intersection Observer to know when its target element is considered visible. |
-| `preset` | `"fade" \| "slide" \| "fly" \| "spin" \| "blur" \| "scale"` | `"fade"` | The transition preset that should be applied. Check out the ["presets"](#presets) subsection for more info. |
-| `reset` | `boolean` | `false` | When set to `true`, the node transitions out when out of view, and is revealed again when back in view.{ your markup goes here }
-```
+You can find full documentation on [svelte-reveal.dev](https://svelte-reveal.dev).
## Troubleshooting