Alphanumeric

Alphanumeric works like an analog flipboard at a train station. This face makes heavy use of the Sequencer to increment and decrement the clock.

Options

type AlphanumericProps = {
    /**
     * The starting value of the clock.
     */
    value: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * The target value of the clock.
     */
    targetValue?: FaceValue<string> | FaceValue<DigitizedValues>;
    /**
     * Determines if the clock increments or decrements towards the target.
     */
    method?: 'increment' | 'decrement';
    /**
     * Determines if the sequencer works forwards or backwards.
     */
    direction?: 'auto' | 'forwards' | 'backwards';
    /**
     * The sequencer instance or options used for the sequencer.
     */
    sequencer?: UseSequencer | SequencerOptions;
    /**
     * Determines how many characters to skip with each interval.
     */
    skipChars?: number;
};

Basic Example

This basic example demonstrates a clock flipping from Hellow World! to This is FlipClock.js. The clock stops after 3 changes and skips 5 characters at a time until it reaches its destination. stopAfterChanges controls how many characters are being flipped at a single time. Adjusting the skipChars option will determine how fast the clock reaches its target value.

import { alphanumeric, css, faceValue, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    timer: 200,
    face: alphanumeric({
        value: faceValue('Hello World!'),
        targetValue: faceValue('This is FlipClock.js'),
        sequencer: {
            stopAfterChanges: 3
        },
        skipChars: 5
    }),
    theme: theme({
        dividers: ' ',
        css: css({
            animationDuration: '100ms',
            fontSize: '2rem'
        })
    })
});

Flip Backwards

The clock will automatically flip backwards when the target value length is less than the current value length.

import { alphanumeric, css, faceValue, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    timer: 200,
    face: alphanumeric({
        value: faceValue('This is FlipClock.js'),
        targetValue: faceValue('Hello World!'),
        sequencer: {
            stopAfterChanges: 3,
        },
        skipChars: 5
    }),
    theme: theme({
        dividers: ' ',
        css: css({
            animationDuration: '100ms',
            fontSize: '2rem'
        })
    })
});

Shuffle the Charset

Shuffling the charset randomly flips to characters until it reaches the target value. Many times shuffling the charset will result in the clock reaching the target faster because it doesn't have to flip through the entire sequence to reach its target.

import { alphanumeric, css, faceValue, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    timer: 200,
    face: alphanumeric({
        value: faceValue('Hello World!'),
        targetValue: faceValue('This is FlipClock.js'),
        sequencer: {
            charset: {
                shuffle: true
            },
            stopAfterChanges: 3,
        },
        skipChars: 10
    }),
    theme: theme({
        dividers: ' ',
        css: css({
            animationDuration: '100ms',
            fontSize: '2rem'
        })
    })
});