Skip to content
Caps0.4.0
API reference

components/scroll-to-bottom-blob-state

Exports

Section titled “Exports”
Kind Export Description
type alias ScrollDirection Scroll layout used to measure the distance from the latest content.
type alias ScrollGeometry The native geometry needed by the drop, in CSS pixels.
type alias DropTokens Theme-resolved physics and accessibility settings.
type alias DropState Continuous drop state; no DOM or timers are needed to advance it.
type alias DropInput One frame’s scroll displacement, end distance, unread count and jump intent.
function distanceToBottom() Distance from the visual end; column-reverse ends at scrollTop zero.
function createDropState() A drop starts hidden until its scroller is more than 48px from the end.
function unreadVolume() Subtle unread volume, capped at fifteen percent.
function stepDrop() Advance with bounded substeps so long browser frames cannot destabilize the springs.

ScrollDirectiontype alias

Section titled “ScrollDirection”
Signature
type ScrollDirection = "forward" | "reverse";

Scroll layout used to measure the distance from the latest content.

ScrollGeometrytype alias

Section titled “ScrollGeometry”
Signature
type ScrollGeometry = Readonly<{
  clientHeight: number;
  scrollHeight: number;
  scrollTop: number;
}>;

The native geometry needed by the drop, in CSS pixels.

DropTokenstype alias

Section titled “DropTokens”
Signature
type DropTokens = Pick<
  Motion,
  "springDuration" | "bounce" | "stretch" | "fast" | "reduced"
>;

Theme-resolved physics and accessibility settings.

DropStatetype alias

Section titled “DropState”
Signature
type DropState = Readonly<{
  phase: "hidden" | "welling" | "resting" | "tugged" | "merging";
  shown: boolean;
  jumped: boolean;
  velocity: number;
  y: number;
  vy: number;
  volume: number;
  vv: number;
  opacity: number;
  unread: number;
  bead: number;
}>;

Continuous drop state; no DOM or timers are needed to advance it.

DropInputtype alias

Section titled “DropInput”
Signature
type DropInput = Readonly<{
  distance: number;
  delta: number;
  unread: number;
  jump?: boolean;
}>;

One frame’s scroll displacement, end distance, unread count and jump intent.

distanceToBottom()function

Section titled “distanceToBottom()”
Signature
function distanceToBottom(geometry, direction): number;

Distance from the visual end; column-reverse ends at scrollTop zero.

Parameters

Section titled “Parameters”
Parameter Type
geometry ScrollGeometry
direction ScrollDirection

Returns

Section titled “Returns”

number

createDropState()function

Section titled “createDropState()”
Signature
function createDropState(): DropState;

A drop starts hidden until its scroller is more than 48px from the end.

Returns

Section titled “Returns”

DropState

unreadVolume()function

Section titled “unreadVolume()”
Signature
function unreadVolume(unread): number;

Subtle unread volume, capped at fifteen percent.

Parameters

Section titled “Parameters”
Parameter Type
unread number

Returns

Section titled “Returns”

number

stepDrop()function

Section titled “stepDrop()”
Signature
function stepDrop(previous, input, elapsed, tokens): DropState;

Advance with bounded substeps so long browser frames cannot destabilize the springs.

Parameters

Section titled “Parameters”
Parameter Type
previous DropState
input DropInput
elapsed number
tokens DropTokens

Returns

Section titled “Returns”

DropState