From 030c974c58b1692abb8c66c6f7434564221e7ce2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 00:24:52 +0000
Subject: [PATCH 1/2] Initial plan


From bebed8d8c5a76179b3062f8a7345ef36af2cd57e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 00:30:28 +0000
Subject: [PATCH 2/2] Update to use @starting-style for entry animation

Co-authored-by: marlonmarcello <1956448+marlonmarcello@users.noreply.github.com>
---
 .stylelintrc        |  1 +
 README.md           | 37 ++++++++++++++++++++++---------------
 package-lock.json   |  4 ++--
 src/main.module.css | 12 ++++++------
 src/main.tsx        |  7 ++++++-
 5 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index 34563f5..5bf836c 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -8,6 +8,7 @@
   ],
   "plugins": ["stylelint-selector-bem-pattern"],
   "rules": {
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["starting-style"] }],
     "no-descending-specificity": null,
     "selector-class-pattern": null,
     "plugin/selector-bem-pattern": {
diff --git a/README.md b/README.md
index a4001c7..d92c3cf 100644
--- a/README.md
+++ b/README.md
@@ -101,11 +101,10 @@ function MyModal() {
 
 Custom transition, focus management and hash-based state management.
 
-Use your favorite animation library, [@wethegit/react-hooks](https://wethegit.github.io/react-hooks/use-animate-presence) provides a simple one for these cases.
+The [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) CSS at-rule lets you define entry animations with pure CSS — no extra JavaScript or animation libraries needed.
 
 ```jsx
 import { useRef } from 'react'
-import { useAnimatePresence } from '@wethegit/react-hooks'
 import {
   Modal,
   ModalContent,
@@ -113,6 +112,8 @@ import {
   useModal
 } from "@wethegit/react-modal"
 
+import styles from "./my-styles.module.css"
+
 function MyModal() {
   const triggerButton = useRef(null)
   const modalRootRef = useRef(null)
@@ -124,11 +125,6 @@ function MyModal() {
     hash: "modal-with-hash",
   })
 
-  const { render, animate } = useAnimatePresence({
-    isVisible: isOpen,
-    duration: 800
-  })
-
   return (
     <>
       <button ref={triggerButton} onClick={toggle}>
@@ -136,15 +132,10 @@ function MyModal() {
       </button>
       <div ref={modalRootRef}></div>
 
-      {render && modalRootRef.current && (
-        <Modal 
-          renderTo={modalRootRef.current}
-          style={{
-          transition: `opacity 800ms ease-in-out`,
-          opacity: animate ? 1 : 0
-        }}>
+      {isOpen && modalRootRef.current && (
+        <Modal renderTo={modalRootRef.current}>
           <ModalBackdrop onClick={toggle} />
-          <ModalContent>
+          <ModalContent className={styles.modal}>
             <button onClick={toggle}>
               Close
             </button>
@@ -157,6 +148,22 @@ function MyModal() {
 }
 ```
 
+```css
+/* my-styles.module.css */
+.modal {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  opacity: 1;
+  transform: scale(1);
+}
+
+@starting-style {
+  .modal {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
 ## Props
 
 ### `<Modal>`
diff --git a/package-lock.json b/package-lock.json
index baa2a9f..d011b85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@wethegit/react-modal",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@wethegit/react-modal",
-      "version": "3.1.0",
+      "version": "3.2.0",
       "license": "MIT",
       "dependencies": {
         "@changesets/changelog-github": "~0.5.0",
diff --git a/src/main.module.css b/src/main.module.css
index 4651be0..30b73c2 100644
--- a/src/main.module.css
+++ b/src/main.module.css
@@ -22,14 +22,14 @@
 }
 
 .CustomModalTransition {
-  transition: transform var(--transition-duration)
-    var(--ease, cubic-bezier(0.77, 0, 0.1, 1.39));
-  transform: scale(var(--scale, 0));
+  transition: transform 0.5s cubic-bezier(0.77, 0, 0.1, 1.39);
+  transform: scale(1);
 }
 
-.CustomModalTransitionOpen {
-  --ease: cubic-bezier(0.77, 0, 0.1, 1.39);
-  --scale: 1;
+@starting-style {
+  .CustomModalTransition {
+    transform: scale(0);
+  }
 }
 
 .CustomModalAbsolute {
diff --git a/src/main.tsx b/src/main.tsx
index c71a5b2..fbbfeea 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -24,7 +24,12 @@ function CustomModal() {
       {isOpen && modalRootRef.current && (
         <Modal renderTo={modalRootRef.current}>
           <ModalBackdrop onClick={toggle} className={styles.CustomModalOverlay} />
-          <ModalContent className={classnames([styles.CustomModalContent])}>
+          <ModalContent
+            className={classnames([
+              styles.CustomModalContent,
+              styles.CustomModalTransition,
+            ])}
+          >
             <button onClick={toggle} className={styles.CustomModalClose}>
               Close
             </button>