Docs/beta demos

documentation/docs/examples/easing.mdx

@@ -6,7 +6,7 @@ import { EasingDemo } from '/src/components/easing-demo';
 
 # Easing Animation
 
-You can provide [CSS timing functions](/docs/v4/usage/parallax-props#timing-functions) or [cubic-bezier curve params](/docs/v4/usage/parallax-props#cubic-bezier-easing-function) to the `useParallax` hook or `<Parallax />` component.
+You can provide [CSS timing functions](/docs/v4/usage/parallax-props#easing) or `cubic-bezier(...)` curves to the `useParallax` hook or `<Parallax />` component.
 
 ## Example using a timing function
 
@@ -32,19 +32,19 @@ When defining an `easing` prop like above, ALL provided CSS effects will be ease
 
 ## Custom cubic-bezier
 
-Define a custom cubic-bezier curve by providing the 4 params to the `easing` prop.
+Define a custom cubic-bezier curve by providing the 4 params as a CSS `cubic-bezier(...)` string.
 
 ```tsx
 function Component() {
   const parallax = useParallax<HTMLDivElement>({
-    easing: [1, -0.75, 0.5, 1.34],
+    easing: 'cubic-bezier(1, -0.75, 0.5, 1.34)',
     translateX: [0, 100],
   });
   return <div ref={parallax.ref} />;
 }
 ```
 
-<EasingDemo eased={{ easing: [1, -0.75, 0.5, 1.34] }} />
+<EasingDemo eased={{ easing: 'cubic-bezier(1, -0.75, 0.5, 1.34)' }} />
 
 ## Independent Easing
 

documentation/docusaurus.config.js

@@ -17,6 +17,45 @@ const config = {
   organizationName: 'jscottsmith', // Usually your GitHub org/user name.
   projectName: 'react-scroll-parallax', // Usually your repo name.
 
+  plugins: [
+    require.resolve('./src/plugins/tailwind-config.js'),
+    [
+      '@docusaurus/plugin-client-redirects',
+      {
+        redirects: [
+          {
+            to: '/docs/v4/examples/how-it-works',
+            from: '/docs/examples/how-it-works',
+          },
+          {
+            to: '/docs/v4/examples/banners',
+            from: '/docs/examples/banners',
+          },
+          {
+            to: '/docs/v4/examples/advanced-banners',
+            from: '/docs/examples/advanced-banners',
+          },
+          {
+            to: '/docs/v4/examples/custom-effects',
+            from: '/docs/examples/custom-effects',
+          },
+          {
+            to: '/docs/v4/examples/easing',
+            from: '/docs/examples/easing',
+          },
+          {
+            to: '/docs/v4/examples/horizontal-scroll',
+            from: '/docs/examples/horizontal-scroll',
+          },
+          {
+            to: '/docs/v4/examples/scroll-effects',
+            from: '/docs/examples/scroll-effects',
+          },
+        ],
+      },
+    ],
+  ],
+
   presets: [
     [
       'classic',
@@ -52,6 +91,11 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
+      },
       algolia: {
         appId: 'GKA17TPGZY',
         // Public API key: it is safe to commit it
@@ -106,8 +150,7 @@ const config = {
             label: 'Components',
           },
           {
-            type: 'doc',
-            docId: 'examples/how-it-works',
+            to: '/docs/v4/examples/how-it-works',
             position: 'left',
             label: 'Examples',
           },

documentation/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.9.2",
+    "@docusaurus/plugin-client-redirects": "3.9.2",
     "@docusaurus/plugin-google-analytics": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
     "@mdx-js/react": "^3.0.0",
@@ -27,7 +28,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-scroll-parallax": "^3.4.5"
+    "react-scroll-parallax": "^4.0.0-beta.1"
   },
   "browserslist": {
     "production": [
@@ -42,8 +43,8 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/types": "3.9.2",
     "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "3.9.2",
     "@types/react": "^19.1.0",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.9.2"

documentation/postcss.config.js

@@ -1,6 +1,10 @@
+// Tailwind is wired through the Docusaurus plugin at
+// src/plugins/tailwind-config.js (configurePostCss).
+// Keep autoprefixer here for any PostCSS passes that load this file directly.
+const path = require('path');
+
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

documentation/src/components/bg-container/index.tsx

@@ -3,16 +3,10 @@ import { PropsWithChildren } from 'react';
 
 export const BgContainer = (props: PropsWithChildren<{}>) => {
   return (
-    <div className="relative my-2xl bg-gray-900 px-lg py-96 w-full rounded-md px-bg text-black overflow-hidden">
-      {/* <div className="h-screen" /> */}
-
-      <div
-        className="flex flex-row items-center justify-evenly w-full"
-        style={{ perspective: '250px' }}
-      >
+    <div className="demo-bg-clip relative my-2xl bg-gray-900 px-lg py-96 w-full rounded-md px-bg text-black">
+      <div className="flex flex-row items-center justify-evenly w-full">
         {props.children}
       </div>
-      {/* <div className="h-screen" /> */}
     </div>
   );
 };

documentation/src/components/custom-effect/index.tsx

@@ -5,6 +5,7 @@ import './index.css';
 
 export function CustomEffect() {
   const parallax = useParallax<HTMLHeadingElement>({
+    translateX: [0, 0], // required to trigger progress change
     onProgressChange: (progress) => {
       if (parallax.ref.current) {
         // set progress to CSS variable

documentation/src/components/easing-demo/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useParallax } from 'react-scroll-parallax';
-import { ParallaxProps } from 'react-scroll-parallax/dist/types';
+import { useParallax, type ParallaxProps } from 'react-scroll-parallax';
 import { BgContainer } from '../bg-container';
 
 export const EasingDemo = (props: {

documentation/src/components/element-progress/index.tsx

@@ -13,6 +13,7 @@ export const ElementProgress = () => {
         onProgressChange={(progress) => setProgress(progress)}
         onEnter={() => setEntered(true)}
         onExit={() => setEntered(false)}
+        translateX={[0, 0]}
         className="relative rounded-lg bg-gray-600 bg-opacity-50"
       >
         <div className="absolute inset-0 z-10 flex items-center justify-center border-2 border-gray-400 border-solid bg-gray-600 rounded-lg">

documentation/src/components/rotation-axis/index.tsx

@@ -13,14 +13,16 @@ export const RotationAxis = () => {
   });
   return (
     <BgContainer>
-      <div
-        ref={parallax.ref}
-        className="flex items-center gap-sm md:gap-lg justify-center text-4xl"
-      >
-        <div className={cx(shared)}>👍🏻</div>
-        <div className={cx(shared)}>👏🏻</div>
-        <div className={cx(shared)}>🙌🏻</div>
-        <div className={cx(shared)}>👎🏻</div>
+      <div style={{ perspective: '250px' }}>
+        <div
+          ref={parallax.ref}
+          className="flex items-center gap-sm md:gap-lg justify-center text-4xl"
+        >
+          <div className={cx(shared)}>👍🏻</div>
+          <div className={cx(shared)}>👏🏻</div>
+          <div className={cx(shared)}>🙌🏻</div>
+          <div className={cx(shared)}>👎🏻</div>
+        </div>
       </div>
     </BgContainer>
   );

documentation/src/css/custom.css

@@ -1,3 +1,5 @@
+@config "../../tailwind.config.js";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -27,6 +29,16 @@
   border: 1px solid #eee;
 }
 
+/*
+ * Clip demo content without creating a scroll container (unlike overflow: hidden).
+ * clip-path paints a hard clip that still works when WAAPI applies compositor
+ * transforms; overflow: clip alone is unreliable with 3D rendering contexts.
+ */
+.demo-bg-clip {
+  overflow: clip;
+  clip-path: inset(0 round 0.375rem);
+}
+
 html[data-theme='dark'] .px-bg {
   background-image: url(/static/img/bg-px.svg);
   background-color: rgb(40, 42, 54);

documentation/src/plugins/tailwind-config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+/** @param {import('@docusaurus/types').LoadContext} context */
+module.exports = function tailwindPostCssPlugin(context) {
+  const tailwindConfigPath = path.join(context.siteDir, 'tailwind.config.js');
+
+  return {
+    name: 'docusaurus-tailwind-postcss',
+    configurePostCss(postcssOptions) {
+      const tailwindcss = require('tailwindcss');
+      const autoprefixer = require('autoprefixer');
+
+      const plugins = postcssOptions.plugins ?? [];
+
+      const withoutTailwind = plugins.filter((plugin) => {
+        if (typeof plugin === 'function') {
+          return plugin.postcssPlugin !== 'tailwindcss';
+        }
+        if (Array.isArray(plugin)) {
+          const pluginPath = String(plugin[0] ?? '');
+          return !pluginPath.includes('tailwindcss');
+        }
+        return true;
+      });
+
+      postcssOptions.plugins = [
+        tailwindcss({ config: tailwindConfigPath }),
+        autoprefixer(),
+        ...withoutTailwind,
+      ];
+
+      return postcssOptions;
+    },
+  };
+};

documentation/tailwind.config.js

@@ -1,5 +1,11 @@
+const path = require('path');
+
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  content: [
+    path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx}'),
+    path.join(__dirname, 'docs/**/*.mdx'),
+    path.join(__dirname, 'versioned_docs/**/*.mdx'),
+  ],
   theme: {
     extend: {
       borderRadius: {