Trailing fade

shad gradually reveals the trailing text with a moving gradient. Content already displayed stays unchanged, while the last few characters become visible as the stream advances.

Usage

Choose your framework above each example. Pass the Core example’s mappers to the Core inputs to enable the mappers explicitly. Components enable the same effects through streaming.effect and include their visual renderers.

import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Shad } from '@fluxdown/core-plugins/plugins/mapper/shad';

const mappers: MapperPluggable[] = [
  [Smooth, { enabled: true }],
  [Shad, { enabled: true }],
];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown :streaming="{ effect: 'shad' }" :text="text" />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown streaming={{ effect: 'shad' }} {text} />

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = { effect: 'shad' };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={props.text} />;
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

Smoothing is enabled by default. Adjust the tail length and mask width to match your typography:

import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Shad } from '@fluxdown/core-plugins/plugins/mapper/shad';

const mappers: MapperPluggable[] = [
  [Smooth, { enabled: true }],
  [Shad, { enabled: true, length: 3, maskWidth: 18 }],
];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown
    :streaming="{ effect: ['shad', { length: 3, maskWidth: 18 }] }"
    :text="text"
  />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown
  streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
  {text}
/>

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = {
    effect: ['shad', { length: 3, maskWidth: 18 }],
  };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={props.text}
    />
  );
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

Configuration

These fields belong to the shad configuration object in ['shad', config].

enabled Optional

Type: boolean

Default: true

Enable the trailing fade.

length Optional

Type: number

Default: 10

Number of trailing characters included in the fade. Fractions round down; negative and non-finite values become 0.

maskWidth Optional

Type: number

Default: 15

Fade mask width in pixels. 0 hides the mask, negative values become 0, and non-finite values use the default width.

#Trailing fade

#Usage

#Configuration

#enabled Optional