Blur & Rotate
Blur chuyển từ nhoè sang rõ; Rotate xoay phần tử từ -90° về vị trí — hai chuyển động presence nhấn mạnh.
Cùng API với Fade (visible, appear, unmountOnExit, duration…). Blur dùng filter blur-md; Rotate dùng thuộc tính rotate và đảo chiều trong RTL. Hợp để đổi icon tại chỗ (phát/tạm dừng) hay làm nổi minh hoạ khi tải xong.
Blur
Rotate
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { Blur, Rotate } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Đổi icon bằng Rotate
Hai Rotate chồng lên nhau trong một ô lưới: icon cũ xoay ra, icon mới xoay vào.
幽玄 — vẻ đẹp sâu lắng, khó nắm bắt.
Blur khi xuất hiện
appear + duration="slow" để chữ lớn hiện dần từ nhoè sang rõ.
Cách dùng
Nên
- Dùng tiết kiệm — một điểm nhấn chuyển động mỗi khung nhìn.
- Giữ thời lượng fast khi đổi icon trong nút.
Không nên
- Không blur văn bản người dùng cần đọc ngay.
- Không xoay phần tử lớn hoặc chứa nhiều chữ.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| visibleboolean | Mặc định: — | true: chạy chuyển động vào; false: chạy chuyển động ra. |
| appearboolean | Mặc định: false | Chạy chuyển động vào ngay lần render đầu (khi visible = true). |
| unmountOnExitboolean | Mặc định: false | Gỡ phần tử khỏi DOM khi thoát xong; nếu false phần tử được ẩn (visibility: hidden). |
| duration"faster" | "fast" | "normal" | "gentle" | "slow" | Mặc định: "normal" | Thời lượng pha vào — map tới token --durationFaster … --durationSlow; easing --curveDecelerateMid. |
| exitDuration"faster" | "fast" | "normal" | "gentle" | "slow" | Mặc định: = duration | Thời lượng pha ra; easing --curveAccelerateMid. |
| onMotionFinish(direction: "enter" | "exit") => void | Mặc định: — | Gọi khi một pha chuyển động kết thúc. |
| childrenReactElement | Mặc định: — | Một phần tử duy nhất — nhận class chuyển động qua Slot. |
| animateOpacityboolean | Mặc định: true | Kèm mờ dần (cả Blur và Rotate). |