Easily create unconventional text effects with Blotter.js in your Vue project

Features

• Declarative API for creating Blotter text effects
• Pause animation when outside the viewport
• Combine with Vue's event API to manipulate effects

Getting started

Unfortunately, Blotter.js is not currently available on npm, so you will need to import the library and materials you need through CDN. (I'm currently looking at getting Blotter.js up on npm to make this process simpler)

For standard Vue you will need to add the main Blotter.js library and any additional materials to your index.html file:

Blotter library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/blotter.min.js"></script>

Blotter materials (grab at least one):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/channelSplitMaterial.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/fliesMaterial.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/liquidDistortMaterial.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/rollingDistortMaterial.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/slidingDoorMaterial.min.js"></script>

For Nuxt you will use the same links but in your nuxt.config.js

module.exports = {
    mode: 'spa',
    head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/blotter.min.js' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/rollingDistortMaterial.min.js' }
    ]
    },
}

Usage

Once you've imported the scripts you can access the component by installing it:

npm install vue-blotter

and then importing it into your component.

Basic example

A material type must be set as a bare minimum for the component to render.

<template>
  <vue-blotter 
    material-type="LiquidDistortMaterial"
  >
    <h1></h1>
  </vue-blotter>
</template>

<script>
import VueBlotter from "vue-blotter";

export default {
  components: {
    VueBlotter
  }
};
</script>

Additional options example

<template>
  <vue-blotter
    family="Garamond"
    fill="#FFAAEE"
    text-style="italic"
    :size="120"
    material-type="RollingDistortMaterial"
    text="Blotter"
    :uniforms="{
      uSineDistortSpread: 0.25,
      uSineDistortAmplitude: 0.8
    }"
>
  <!-- Element to append canvas to -->
  <h1 slot-scope="{ blotterScope }"></h1>
</vue-blotter>
</template>

<script>
import VueBlotter from 'vue-blotter'

export default {
  components: {
    VueBlotter
  }
}
</script>

Interaction example

<template>
    <vue-blotter
      family="Inconsolata"
      fill="#171717"
      text-style="normal"
      :size="180"
      material-type="LiquidDistortMaterial"
      text="Blotter"
      :uniforms="{
        uSpeed: 0.25
      }"
    >
      <h1 slot-scope="{ blotterScope }" @mousemove="(e) => mouseMove(e, blotterScope)"></h1>
    </vue-blotter>
</template>

<script>
import VueBlotter from 'vue-blotter'

export default {
  components: {
    VueBlotter
  },
  methods: {
      mouseMove(e, scope) {
          scope.material.uniforms.uSpeed.value = (e.x + e.y) / 4500
      }
  }
}
</script>

Configuration options

Detailed information about materials and their respective uniforms can be found at https://blotter.js.org/#/materials. I've exposed the following configuration options, if you think I've missed anything major please feel free to create an issue.

Acknowledgments

• Bradley Griffith for making the awesome Blotter.js library
• Adam Watham for his excellent course on Advanced Vue Component Design
• Mentally Friendly for supporting me in releasing my first Open Source Vue component
• vue-sfc-rollup boilerplate which made uploading a Vue component to npm really easy