DOCSEARCHbyAlgolia
Submit Docs

Fancy Components

repository·main·Indexed 25 days ago

https://github.com/danielpetho/fancy

A free and open source library of animated React components and microinteractions designed to add visual flair to web applications. Built with React 18, TypeScript, Tailwind CSS, and the motion package, it includes components such as Animated Gradient With SVG, PixelTrail, CirclingElements, and 3D CSS Box.

Tokens
27.6K
Snippets
54
Records
207
Agent score
83%

What's inside fancy

  3. Understand Underline Animation implementation

    main

    The Underline Animation components do not use the standard CSS text-decoration-line: underline property. Instead, they render an absolute-positioned div element below the text. The dimensions of this underline are calculated relative to the font size using the following ratios:

    • underlineHeightRatio: Controls the height of the underline (defaults to 0.1 or 10% of font size).
    • underlinePaddingRatio: Controls the padding below the text (defaults to 0.01 or 1% of font size).

    Animation Variants

    • Center: The underline grows outward from the center point.
    • Comes In Goes Out: The underline enters from one side, then exits from the other side.
    • Goes Out Comes In: The underline exits from one side, then re-enters from the opposite side.

  6. Use Variable Font Hover By Letter component

    main

    The variable-font-hover-by-letter component animates font variation settings of individual letters. It requires a variable font to function.

    You must provide fromFontVariationSettings and toFontVariationSettings props using the CSS font-variation-settings syntax. These strings define the starting and target states of the font axes (e.g., weight, slant, width).

    Note: Always verify the available axes and their specific ranges in your font's documentation before configuring the props.

  7. Demo requirements for components

    main
    Each component requires at least one demo showcasing it in action. Demos should be visually engaging and responsive across all viewport sizes. While tailwind.config.ts provides consistent color classes, creative freedom is encouraged to create high-impact, 'edgy' graphic-designer style visuals.

  11. Use the Scroll and Swap Text component

    main

    The Scroll and Swap Text component creates a text effect where letters swap vertically based on scroll progress.

    Important Implementation Notes:

    • The containerRef prop must point to a container element that has a non-static position (e.g., relative, fixed, or absolute) to ensure scroll offset is calculated correctly.
    • You may need to adjust the offset and the container's position to achieve the desired animation timing. The component uses Framer Motion's useScroll hook internally.