vue-blotter

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.

Key	Type	Default	Description
materialType (required)	String	undefined	The type of Blotter material to be used.
text	String	'Blotter'	The text to be rendered
uniforms	Object	{}	The uniforms to be applied to the material
autoplay	Boolean	true	Whether or not to immediately begin the render loop
checkInViewport	Boolean	true	Whether to pause the animation when outisde the viewport
family	String	'Garamond'	The font family to be used
size	Number	120	The size of the font
fill	String	'#171717'	The fill colour of the text
textStyle	String	'normal'	The style of the text
weight	Number	400	The weight of the font
padding	Number	0	The padding around the text
paddingTop	Number	0	The top padding of the text
paddingRight	Number	0	The right padding of the text
paddingBottom	Number	0	The bottom padding of the text
paddingLeft	Number	0	The left padding of the text

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