haru-cat 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 This file records notable changes to Haru Cat. It is maintained manually and
 organized by release.
 
+## 0.0.3 — 2026-07-26
+
+### Added
+
+- Add a `visible` prop for controlling whether Haru-kun is shown.
+- Add a `fadeDuration` prop for customizing visibility transitions.
+- Add controls to the development playground for checking visibility and fade
+  duration.
+
+### Changed
+
+- Respect the user's reduced-motion preference by disabling visibility fades.
+- Mark the package as a Client Component for React Server Components
+  environments.
+- Fall back safely when the environment does not provide `matchMedia`.
+
 ## 0.0.2 — 2026-07-26
 
 ### Added

package/README.ja.md

@@ -47,6 +47,23 @@ export default function App() {
 `offsetX`と`offsetY`は、それぞれの方向で`offset`より優先されます。
 `bottom-center`では、横方向の余白は適用されません。
 
+`visible`を使用すると、ハルくんの表示と非表示を切り替えられます。
+`visible`の値を切り替えると、初期設定では300ミリ秒かけてフェードイン・フェードアウトします。
+
+```tsx
+<HaruCat visible={isVisible} />
+```
+
+フェード時間を変更する場合は、`fadeDuration`へミリ秒単位で指定します。
+`0`を指定すると、フェードせず即座に切り替わります。
+
+```tsx
+<HaruCat visible={isVisible} fadeDuration={500} />
+```
+
+フェードは`visible`の値が変更されたときに適用されます。
+`<HaruCat />`は初回レンダー時から表示されるため、ページ読み込み時のフェードインは行いません。
+
 ## Props
 
 | Prop | 型 | 初期値 | 説明 |
@@ -57,6 +74,8 @@ export default function App() {
 | `offsetX` | `number` | `undefined` | 左端または右端からの距離です。横方向では`offset`より優先されます。 |
 | `offsetY` | `number` | `undefined` | 画面下端からの距離です。縦方向では`offset`より優先されます。 |
 | `responsive` | `boolean` | `true` | 小さい画面で、画像の大きさを画面の短い辺の30%以下に調整します。 |
+| `visible` | `boolean` | `true` | ハルくんを表示するかどうかを指定します。 |
+| `fadeDuration` | `number` | `300` | フェードイン・フェードアウトの時間をミリ秒単位で指定します。`0`未満の値は`0`として扱われます。 |
 | `zIndex` | `number` | `9999` | コンポーネントのCSS `z-index`です。 |
 | `className` | `string` | `undefined` | 外側の要素に設定するクラス名です。 |
 
@@ -66,6 +85,9 @@ export default function App() {
 
 小さい画面でも`size`を正確なピクセル値として使用したい場合は、`responsive={false}`を指定してください。
 
+Haru Catは、利用者の`prefers-reduced-motion`設定に対応しています。
+動きを減らす設定が有効な場合、表示と非表示はフェードせず即座に切り替わります。
+
 ## TypeScript
 
 Propsと表示位置の型をパッケージから読み込めます。

package/README.md

@@ -48,6 +48,23 @@ different.
 `offsetX` and `offsetY` override `offset` on their respective axes. The
 horizontal offset does not apply to `bottom-center`.
 
+Use `visible` to show or hide Haru-kun. Changes fade over 300 milliseconds by
+default.
+
+```tsx
+<HaruCat visible={isVisible} />
+```
+
+Customize the fade duration in milliseconds with `fadeDuration`. Set it to `0`
+for an immediate change.
+
+```tsx
+<HaruCat visible={isVisible} fadeDuration={500} />
+```
+
+The fade applies when `visible` changes. `<HaruCat />` is shown immediately on
+its initial render.
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -58,6 +75,8 @@ horizontal offset does not apply to `bottom-center`.
 | `offsetX` | `number` | `undefined` | Left or right distance in pixels. Overrides `offset` on the horizontal axis. |
 | `offsetY` | `number` | `undefined` | Bottom distance in pixels. Overrides `offset` on the vertical axis. |
 | `responsive` | `boolean` | `true` | Limits the image to 30% of the viewport's shorter side on smaller screens. |
+| `visible` | `boolean` | `true` | Whether Haru-kun is shown. |
+| `fadeDuration` | `number` | `300` | Fade-in and fade-out duration in milliseconds. Values below `0` are treated as `0`. |
 | `zIndex` | `number` | `9999` | CSS `z-index` of the component. |
 | `className` | `string` | `undefined` | Class name applied to the wrapper element. |
 
@@ -69,6 +88,9 @@ the safe-area insets provided by the browser to the configured edge offsets.
 Set `responsive={false}` when `size` must remain an exact pixel size on small
 screens.
 
+Haru Cat respects the user's `prefers-reduced-motion` setting. When reduced
+motion is requested, visibility changes happen immediately instead of fading.
+
 ## TypeScript
 
 The component props and position type are exported from the package.

package/dist/HaruCat.d.ts

@@ -6,7 +6,9 @@ export type HaruCatProps = {
     offsetX?: number;
     offsetY?: number;
     responsive?: boolean;
+    visible?: boolean;
+    fadeDuration?: number;
     zIndex?: number;
     className?: string;
 };
-export declare function HaruCat({ position, size, offset, offsetX, offsetY, responsive, zIndex, className, }: HaruCatProps): import("react").JSX.Element;
+export declare function HaruCat({ position, size, offset, offsetX, offsetY, responsive, visible, fadeDuration, zIndex, className, }: HaruCatProps): import("react").JSX.Element;