diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1586aed..5d5315c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [Unreleased] -
+
+### New Functions 🚀
+
+- `use_prefers_reduced_motion`
+
## [0.12.0] - 2024-08-14
> Make sure you also update `cargo-leptos` to the latest version if you use that.
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index cd07431..ebbb19f 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -48,6 +48,7 @@
- [use_permission](browser/use_permission.md)
- [use_preferred_contrast](browser/use_preferred_contrast.md)
- [use_preferred_dark](browser/use_preferred_dark.md)
+- [use_prefers_reduced_motion](browser/use_prefers_reduced_motion.md)
- [use_service_worker](browser/use_service_worker.md)
- [use_user_media](browser/use_user_media.md)
- [use_web_notification](browser/use_web_notification.md)
diff --git a/docs/book/src/browser/use_prefers_reduced_motion.md b/docs/book/src/browser/use_prefers_reduced_motion.md
new file mode 100644
index 0000000..d6aa3ae
--- /dev/null
+++ b/docs/book/src/browser/use_prefers_reduced_motion.md
@@ -0,0 +1,3 @@
+# use_prefers_reduced_motion
+
+
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index debad03..187bcf3 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -47,6 +47,7 @@ members = [
"use_not",
"use_or",
"use_permission",
+ "use_prefers_reduced_motion",
"use_raf_fn",
"use_resize_observer",
"use_round",
diff --git a/examples/use_prefers_reduced_motion/Cargo.toml b/examples/use_prefers_reduced_motion/Cargo.toml
new file mode 100644
index 0000000..4b0d55a
--- /dev/null
+++ b/examples/use_prefers_reduced_motion/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_prefers_reduced_motion"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.6", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_prefers_reduced_motion/README.md b/examples/use_prefers_reduced_motion/README.md
new file mode 100644
index 0000000..95c5eea
--- /dev/null
+++ b/examples/use_prefers_reduced_motion/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_prefers_reduced_motion`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_prefers_reduced_motion/Trunk.toml b/examples/use_prefers_reduced_motion/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_prefers_reduced_motion/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_prefers_reduced_motion/index.html b/examples/use_prefers_reduced_motion/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_prefers_reduced_motion/index.html
@@ -0,0 +1,7 @@
+
+
+
+ {
+ use_prefers_reduced_motion_with_options(UsePrefersReducedMotionOptions::default())
+}
+
+/// Version of [`fn@crate::use_prefers_reduced_motion`] that takes a `UsePrefersReducedMotionOptions`. See [`fn@crate::use_prefers_reduced_motion`] for how to use.
+pub fn use_prefers_reduced_motion_with_options(options: UsePrefersReducedMotionOptions) -> Signal {
+ #[cfg(not(feature = "ssr"))]
+ {
+ let _ = options;
+ crate::use_media_query("(prefers-reduced-motion: reduce)")
+ }
+ #[cfg(feature = "ssr")]
+ {
+ Signal::derive(move || (options.ssr_motion_header_getter)() == Some("reduce".to_string()))
+ }
+}
+
+/// Options for [`fn@crate::use_prefers_reduced_motion_with_options`].
+#[derive(DefaultBuilder)]
+pub struct UsePrefersReducedMotionOptions {
+ /// Getter function to return the string value of the
+ /// [`Sec-CH-Prefers-Reduced-Motion`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion)
+ /// header.
+ /// When you use one of the features `"axum"`, `"actix"` or `"spin"` there's a valid default
+ /// implementation provided.
+ #[allow(dead_code)]
+ pub(crate) ssr_motion_header_getter: Rc Option>,
+}
+
+impl Default for UsePrefersReducedMotionOptions {
+ fn default() -> Self {
+ Self {
+ ssr_motion_header_getter: Rc::new(move || {
+ get_header!(
+ HeaderName::from_static("sec-ch-prefers-reduced-motion"),
+ use_locale,
+ ssr_motion_header_getter
+ )
+ }),
+ }
+ }
+}