fopix

Fopix is a simple tool for creating 2D pixel text, and simple graphics animations. It is based on ThreeJS and custom forces engine, here is the DEMO

Usage

import { createFopix, SectionData } from '~/index';

// just a basic section with a bunch of words and tags
const SECTIONS: SectionData[] = [
    {
        type: 'words',
        text: [
            'Hi',
            `I'm David`,
            `and I'm a`,
            `software engineer`
        ]
    },
    {
        type: 'tags',
        text: [
            'test',
            'lorem',
            'ipsum',
            'dolor'
        ]
    }
];

function main() {
    const container = document.getElementById('myElement');

    const fopix = createFopix({
        container,
        sections: SECTIONS,
    });

    container.addEventListener('click', () => {
        // navigate through animation, go to next word or section
        fopix.next();
    });
}

API

function createFopix takes object with the below options as it's first argument:

| name | type | default value | required | description | |-----------------|---------------|---------------|-----------|--------------------------------------------------------------------------------| | container | HTMLElement | | ✅ | html elemetnt where canvas should be rendered | | sections | SectionData[] | | ✅ | sections array, more about sections and their types below | | backgroundColor | number | 0xffffffff | ❌ | canvas background color | | size | number | 12 | ❌ | particle size in pixels (one square) | | letterSpacing | number | 5 | ❌ | letter spacing in pixels | | color | number | 0x000000 | ❌ | text color (if particle includes it's own color will be ignored) | | debug | boolean | false | ❌ | draws debug lines, helpful while developing | | width | number | undefined | ❌ | fixed width, if not provided fop will try to obtain it from container element | | height | number | undefined | ❌ | fixed height, if not provided fop will try to obtain it from container element | | resizeFn | ResizeFn | () => ... | ❌ | resize function, see resize example |

Sections

There are three types of section

type VisualizationStateManagerSectionType = 'words' | 'tags' | 'sign';

the main difference between them is transition

• words will just transition to another word
• tags between words will be floating cloud of points
• sign is just special type of words

Editor

After running npm run dev simple editor will be available, you can later use exported graphics as input to section with type sign.