# Fade Content

> Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks.

Wrap anything to fade it in when it scrolls into view. Pick a plain fade, an out-of-focus pull, a washed-out photo that develops, or a noise reveal through fine grain, drifting mist or pixel blocks. Stagger the direct children, tie the fade to the scroll position, or fade back out as the content leaves. Scroll inside the demo panel to see it.

<demo-fade-content>



</demo-fade-content>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/fade-content.json"
```

## Usage

```vue
<script setup lang="ts">
  import FadeContent from '~/components/ui/fade-content/FadeContent.vue';
</script>

<template>
  <FadeContent effect="mist" :duration="1.8">
    <h2>Slow light over the bay</h2>
  </FadeContent>

  <FadeContent
    effect="pixel"
    :stagger="0.1"
    stagger-from="center"
    class="grid grid-cols-3 gap-3"
  >
    <img v-for="src in photos" :key="src" :src="src" alt="" />
  </FadeContent>

  <FadeContent effect="focus" exit :scrub="0.5">
    <p>Sharp only while it sits in the middle of the view.</p>
  </FadeContent>
</template>
```

The noise effects build a small SVG filter per target (`feTurbulence` thresholded by a moving front), so they work on any content, including images and text. Easing names follow GSAP (`power2.out`, `expo.inOut`, `sine.in`, `none`), but the component has no GSAP dependency.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        container
      </code>
    </td>
    
    <td>
      <code>
        string | HTMLElement | null
      </code>
    </td>
    
    <td>
      <code>
        null
      </code>
    </td>
    
    <td>
      Scroll container that drives the fade, as a selector or an element. Defaults to the page.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        effect
      </code>
    </td>
    
    <td>
      <code>
        'fade' | 'focus' | 'develop' | 'dissolve' | 'mist' | 'pixel'
      </code>
    </td>
    
    <td>
      <code>
        'fade'
      </code>
    </td>
    
    <td>
      Plain fade, out of focus, from washed-out gray, through grain, through mist, or block by block.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blur
      </code>
    </td>
    
    <td>
      <code>
        boolean | number
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Extra blur the content starts from, in px. <code>
        true
      </code>
      
       adds 10px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Length of the fade in seconds. Values above 10 are read as milliseconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ease
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'power2.out'
      </code>
    </td>
    
    <td>
      Ease name: <code>
        power1
      </code>
      
      –<code>
        power4
      </code>
      
      , <code>
        sine
      </code>
      
      , <code>
        expo
      </code>
      
      , <code>
        circ
      </code>
      
      , <code>
        back
      </code>
      
       with <code>
        .in
      </code>
      
      /<code>
        .out
      </code>
      
      /<code>
        .inOut
      </code>
      
      , or <code>
        none
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Wait before the fade starts, in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        threshold
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      How far into the viewport the top of the content must be before it fades in, 0–1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        initial-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Opacity the content starts from.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades each direct child in turn, this many seconds apart.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger-from
      </code>
    </td>
    
    <td>
      <code>
        'start' | 'end' | 'center' | 'edges' | 'random'
      </code>
    </td>
    
    <td>
      <code>
        'start'
      </code>
    </td>
    
    <td>
      Which child goes first when staggering.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'scroll' | 'mount'
      </code>
    </td>
    
    <td>
      <code>
        'scroll'
      </code>
    </td>
    
    <td>
      Fade in when the content scrolls into view, or right away.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        once
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Fades in once. Turn off to fade back out when the content scrolls back below the view.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        exit
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Fades the content back out as it scrolls off the top, and in again when it comes back.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scrub
      </code>
    </td>
    
    <td>
      <code>
        boolean | number
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Ties the fade to the scroll position instead of playing it. A number smooths it, in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disappear-after
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the content out again this many seconds after it appears. <code>
        0
      </code>
      
       keeps it shown.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disappear-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Length of the fade out, in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disappear-ease
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'power2.in'
      </code>
    </td>
    
    <td>
      Ease of the fade out.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the wrapper.
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        start
      </code>
    </td>
    
    <td>
      The fade starts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        complete
      </code>
    </td>
    
    <td>
      The fade finishes.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disappearance-complete
      </code>
    </td>
    
    <td>
      The fade out (<code>
        disappear-after
      </code>
      
      ) finishes.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content to fade in. With <code>
        stagger
      </code>
      
      , each direct child fades alone.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- With `prefers-reduced-motion: reduce` the content shows at once and `complete` fires right away.
- Content stays in the DOM the whole time; hidden parts use `visibility: hidden`, so they are skipped by screen readers until they appear.
- The wrapper starts hidden until the client runs, so content wrapped in it is not visible without JavaScript.
- Ported from [React Bits](https://reactbits.dev/animations/fade-content) by David Haz.