diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
new file mode 100644
index 0000000..49e71d5
--- /dev/null
+++ b/effects/seriously.slicer.js
@@ -0,0 +1,232 @@
+/*
+Copyright (c) 2016 Mike Almond - @mikedotalmond - https://github.com/mikedotalmond
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+/**
+* The shader takes a set of 1 pixel wide vertical slices from the source and 
+* interpolates between them to generate the output. The positions of (up to) 
+* 8 slices can be specified, along with noise and a y-position offset amount 
+* to further distort the output.
+
+* The effect it produces is a horizontally-smeared, low-detail version
+* of the input.
+* 
+* It's based on the shader I made to generate the background scene for this project:
+* http://mikedotalmond.co.uk/horizon/
+* https://github.com/mikedotalmond/Horizon
+* 
+* There are two examples in /examples/slicer/ 
+* 
+* @author @mikedotalmond
+*
+*/
+
+/* global define, require */
+(function (root, factory) {
+	'use strict';
+
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['seriously'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		factory(require('seriously'));
+	} else {
+		if (!root.Seriously) {
+			root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };
+		}
+		factory(root.Seriously);
+	}
+}(window, function (Seriously) {
+	'use strict';
+
+	Seriously.plugin('slicer',  function (options) {
+		
+		if(typeof options !== 'object') {
+			options = {};
+		}
+		
+		var getSlicePositions = function(target){
+				var u = options.effect.uniforms;
+				for(var i=0; i < 4; i++){
+					target[i] = u.slicesA[i];
+					target[i + 4] = u.slicesB[i];
+				}
+			},
+			setSlicePositions = function(positions){
+				var u = options.effect.uniforms;
+				for(var i=0;i < 4;i++){
+					u.slicesA[i] = positions[i];
+					u.slicesB[i] = positions[i + 4];
+				}
+			},
+			reset = function(){
+				var p = [];
+				for(var i=0; i < 8; i++){ 
+					p[i] = i/7;
+				}
+				setSlicePositions(p);
+			},
+			randomise = function(){
+				var p=[];
+				for(var i=0; i < 8; i++){ 
+					p[i] = i/7 + Math.random() * 1/8;
+				}
+				setSlicePositions(p);
+			};
+			
+		return {
+			initialize: function (initialize, gl) {
+				initialize();
+				options.effect = this;
+				options.reset = reset;
+				options.randomise = randomise;	
+				options.getSlicePositions = getSlicePositions;
+				options.setSlicePositions = setSlicePositions;
+			},
+			resize: function () {
+				this.uniforms.invHeight = 1.0 / this.height;
+			},
+			commonShader: true,
+			shader: function (inputs, shaderSource) {
+				
+				shaderSource.fragment = [
+					
+					'precision mediump float;',
+					
+					
+					'varying vec2 vTexCoord;',
+					
+					'uniform sampler2D source;',
+					
+					'uniform vec4 slicesA;',
+					'uniform vec4 slicesB;',
+					
+					'uniform float seed;', 
+					'uniform float noiseAmt;', // = .04;',
+					'uniform float invHeight;',
+					'uniform float ySpread;',
+					
+					'float rnd(vec2 x) {',
+						'return fract(sin(dot(x.xy, vec2(12.9898, 78.233))) * 43758.5453);',
+					'}',
+					
+					'void main() {',
+					  
+					  'float vx = vTexCoord.x;',
+					  'float r = rnd(seed * vTexCoord);',
+					  
+					  // get y position, and add offsets to scale and position some Y noise
+					  'float y = vTexCoord.y + (r-.5) * ySpread * invHeight;',
+					  
+					  'vec2 sliceACoord = vec2(0, y);',
+					  'vec2 sliceBCoord = vec2(0, y);',
+					  
+					  'if(vx < slicesA[1]) {',
+						'sliceACoord.x = slicesA[0];',
+						'sliceBCoord.x = slicesA[1];',
+					  '}',
+					  'else if(vx < slicesA[2]) {',
+						'sliceACoord.x = slicesA[1];',
+						'sliceBCoord.x = slicesA[2];',
+					  '}',
+					  'else if(vx < slicesA[3]) {',
+						'sliceACoord.x = slicesA[2];',
+						'sliceBCoord.x = slicesA[3];',
+					  '}',
+					  'else if(vx < slicesB[0]) {',
+						'sliceACoord.x = slicesA[3];',
+						'sliceBCoord.x = slicesB[0];',
+					  '}',
+					  'else if(vx < slicesB[1]) {',
+						'sliceACoord.x = slicesB[0];',
+						'sliceBCoord.x = slicesB[1];',
+					  '}',
+					  'else if(vx < slicesB[2]) {',
+						'sliceACoord.x = slicesB[1];',
+						'sliceBCoord.x = slicesB[2];',
+					  '}',
+					  'else {',
+						'sliceACoord.x = slicesB[2];',
+						'sliceBCoord.x = slicesB[3];',
+					  '}',
+					  
+					  'float f2 =  (vx - sliceACoord.x) / (sliceBCoord.x - sliceACoord.x);',
+					 
+					  // lerp between the two sampling positions
+					  'vec4 c = mix(texture2D(source, sliceACoord), texture2D(source, sliceBCoord), f2);',
+					  
+					  // add noise (monochromatic)
+					  'c += (r - 0.5) * noiseAmt;',
+					  
+					  // output
+					  'gl_FragColor = c;',
+					'}'
+				].join('\n');
+				return shaderSource;
+			}
+		};
+	},
+	{	// metadata
+		inputs: {
+			source: {
+				type: 'image',
+				uniform: 'source'
+			},
+			ySpread:{
+				type:'number',
+				uniform: 'ySpread',
+				min: 0,
+				max: 1024,
+				defaultValue:1.5
+			},
+			slicesA: {
+				type: 'vector',
+				dimensions: 4,
+				uniform: 'slicesA',
+				defaultValue: [0.0, 1/7, 2/7, 3/7]
+			},
+			slicesB: {
+				type: 'vector',
+				dimensions: 4,
+				uniform: 'slicesB',
+				defaultValue: [4/7, 5/7, 6/7, 1.0]
+			},
+			noiseAmount : {
+				type: 'number',
+				uniform: 'noiseAmt',
+				min: 0,
+				max: 1,
+				defaultValue: 0.05
+			},
+			seed: {
+				type: 'number',
+				uniform: 'seed',
+				min: 1,
+				max: 1024,
+				defaultValue: 1 + Math.random() * 1023
+			}
+		},
+		inPlace: true,
+		title: 'Slicer',
+		description: 'Slicer Effect'
+	});
+}));
diff --git a/examples/index.html b/examples/index.html
index 2b5c6f0..4404c06 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -43,6 +43,7 @@
 			<li><a href="demo/threejs-source.html">Three.js Source</a></li>
 			<li><a href="demo/threejs-target.html">Three.js Target</a></li>
 			<li><a href="mirror/">Mirror</a> (<a href="mirror/camera.html">Camera</a>)</li>
+			<li><a href="slicer/">Slicer</a> (<a href="slicer/camera.html">Camera</a>)</li>
 			<li>Transforms
 				<ul>
 					<li><a href="transform/reformat.html">Reformat</a></li>
diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
new file mode 100644
index 0000000..cf38bca
--- /dev/null
+++ b/examples/slicer/camera.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<title>Seriously.js Camera Demo with slicer effect</title>
+	<style type="text/css">
+		body {
+			margin: 0;
+		}
+		img {
+			display: none;
+		}
+		#canvas {
+			position: relative;
+			top: 0;
+			left: 0;
+			width: 1024px;
+			display:block;
+		}
+		button {
+			padding:4px;
+			margin-bottom:8px;
+		}
+		.controls{
+			margin:16px;
+		}
+	</style>
+</head>
+<body>
+	<canvas id="target" width="640" height="480"></canvas>
+	
+	<div class="controls">
+		Slice positions &#160;
+		<button id="reset">Reset</button>&#160;
+		<button id="randomise">Randomise</button>&#160;
+		<span>
+			<input type="checkbox" id="animation-toggle" name="animation-toggle" value="" />
+			<label for="animation-toggle">Animated</label>
+		</span>
+		<div id="animation-speed" style="opacity:0.5">
+			<label for="animation-speed">Animation Speed</label>
+			<input disabled type="range" name="animation-speed" min="0.001" max="0.02" step="0.0001" value=".003" style="width:512px" />
+		</div>
+		<div>
+			<label for="noiseAmount">Noise Amount</label>
+			<input type="range" name="noiseAmount" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
+		</div>
+		<div>
+			<label for="ySpread">Y Spread</label>
+			<input type="range" name="ySpread" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
+		</div>
+		<div>
+			<label for="blur-amount">Blur</label>
+			<input type="range" name="blur-amount" id="blur-amount" min="0" max="1" step="0.001" value=".1" style="width:512px" />
+		</div>
+	</div>
+	
+	<script src="../../seriously.js"></script>
+	<script src="../../sources/seriously.camera.js"></script>
+	<script src="../../effects/seriously.slicer.js"></script>
+	<script src="../../effects/seriously.blur.js"></script>
+	<script>
+	(function() {
+		'use strict';
+		
+		var seriously, // the main object that holds the entire composition
+			source, // wrapper object for source video
+			slicer, // slicer effect
+			slicerControl = {}, sliceAnimator, lastTime=0,
+			animationSpeedSlider, animationSpeedSliderChange,
+			blur, // optional, add some blur to the output
+			target; // a wrapper object for our target canvas
+
+		if (Seriously.incompatible('camera')) {
+			document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
+			document.querySelector('canvas').style.display = 'none';
+			return;
+		}
+		
+		// construct our seriously object
+		seriously = new Seriously();
+		source = seriously.source('camera');
+		target = seriously.target('#target');
+		slicer = seriously.effect('slicer', slicerControl);
+		blur = seriously.effect('blur');
+		
+		// connect the nodes 
+		slicer.source = source;
+		blur.source = slicer;
+		target.source = blur;
+		
+		// bind ui controls for slicer uniforms
+		slicer.ySpread = '#ySpread';
+		slicer.noiseAmount = '#noiseAmount';
+		blur.amount = '#blur-amount';
+		
+		/*
+		 * 	Using slicerControl is optional. Has some utils for setting/controlling the slice positions. 
+		 *	You could just use the vec4 sliceA and sliceB uniforms exposed on the slicer object instead.
+		 *	
+		 *	reset() // resets all slices to be evenly spread from left to right
+		 *	randomise() // randomise slice x positions
+		 *	setSlicePositions(an8ElementArrayOfFloats) // set the 8 slice positions manually - positions are normalised, use increasing values between 0 and 1
+		 *	getSlicePositions(targetArray) // sets the target array with the current slice positions, from 0 to 7
+		*/		
+		animationSpeedSlider=document.getElementsByName('animation-speed')[0];
+		animationSpeedSliderChange = function(){
+			var val = parseFloat(animationSpeedSlider.value);
+			sliceAnimator.sliceTransitionSpeed = val;
+			sliceAnimator.newSlicesSelectTime = 4000 - val*140000;
+		};
+		animationSpeedSlider.addEventListener('change',animationSpeedSliderChange);
+		animationSpeedSlider.addEventListener('input',animationSpeedSliderChange);
+		
+		document.getElementById('reset').addEventListener('click', function(){
+			slicerControl.reset();
+			sliceAnimator.reset();
+		});
+		document.getElementById('randomise').addEventListener('click', function(){
+			slicerControl.randomise();
+			sliceAnimator.reset();
+		});
+		document.getElementById('animation-toggle').addEventListener('click',function(){
+			var state = this.checked;
+			document.getElementById('animation-speed').style.opacity= state ? 1 : 0.5;
+			document.getElementsByName('animation-speed')[0].disabled=!state;
+			if(state) sliceAnimator.reset();
+			sliceAnimator.enabled = state;
+			animationSpeedSliderChange();
+		});
+		
+		// a quick example animating the slice positions over time
+		sliceAnimator = {
+			enabled: false,
+			newSliceTimer: 1e6,
+			newSlicesSelectTime: 5000, // millis
+			sliceTransitionSpeed: 0.003,
+			
+			currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
+			targetSlices: new Float32Array([0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]),
+			
+			reset:function(){ // set the current values here to the values in the shader
+				slicerControl.getSlicePositions(this.currentSlices);
+				this.pickNewTargets();
+			},
+			updateSlices: function(dt){
+				var t = this,
+					targets=t.targetSlices,
+					current=t.currentSlices,
+					c;
+				
+				t.newSliceTimer += dt;
+				if (t.newSliceTimer >= t.newSlicesSelectTime) t.pickNewTargets();
+				
+				// move slices toward targets...
+				for (var i=0; i<8; i++) {
+					c = current[i];
+					current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
+				}
+				
+				slicerControl.setSlicePositions(t.currentSlices);
+			},
+			pickNewTargets: function(){
+				var count = Math.round(4 + (Math.random() * 3)),
+					stripWidth = 1.0 / count;
+					
+				this.newSliceTimer = 0;
+				for (var i=0; i<8; i++) {
+					this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+				}
+			}
+		};
+		
+		// start everything going
+		seriously.go(
+			function(){
+				// before each render
+				var now = performance.now(),
+					dt = now - lastTime;
+				
+				slicer.seed = 1.0 + Math.random() * 1024;
+				
+				if(sliceAnimator.enabled){
+					sliceAnimator.updateSlices(dt);
+				}
+				
+				lastTime = now;
+			}
+		);
+	}());
+	</script>
+</body>
+</html>
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
new file mode 100644
index 0000000..a2525d1
--- /dev/null
+++ b/examples/slicer/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Seriously.js Slicer Example</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<style type="text/css">
+		img{
+			display:none;
+		}
+		body {
+			margin: 0;
+		}
+		#canvas {
+			position: relative;
+			top: 0;
+			left: 0;
+			width: 1024px;
+			display:block;
+		}
+		button {
+			padding:4px;
+			margin-bottom:8px;
+		}
+		.controls{
+			margin:16px;
+		}
+	</style>
+</head>
+<body>
+	<img src="../images/field.jpg" id="image"/>
+	<canvas id="canvas" width="1024" height="628"></canvas>	
+	
+	<div class="controls">
+		Slice positions &#160;
+		<button id="reset">Reset</button>&#160;
+		<button id="randomise">Randomise</button>&#160;
+		<span>
+			<input type="checkbox" id="animation-toggle" name="animation-toggle" value="" />
+			<label for="animation-toggle">Animated</label>
+		</span>
+		<div id="animation-speed" style="opacity:0.5">
+			<label for="animation-speed">Animation Speed</label>
+			<input disabled type="range" name="animation-speed" min="0.0001" max="0.01" step="0.00001" value=".0002" style="width:512px" />
+		</div>
+		<div>
+			<label for="noiseAmount">Noise Amount</label>
+			<input type="range" name="noiseAmount" id="noiseAmount" min="0" max="1" step="0.001" value="0.02" style="width:512px" />
+		</div>
+		<div>
+			<label for="ySpread">Y Spread</label>
+			<input type="range" name="ySpread" id="ySpread" min="0" max="128" step="0.1" value=".5" style="width:512px" />
+		</div>
+		<div>
+			<label for="blur-amount">Blur</label>
+			<input type="range" name="blur-amount" id="blur-amount" min="0" max=".25" step="0.001" value=".02" style="width:512px" />
+		</div>
+	</div>
+		
+		
+	<script src="../../lib/require.js"></script>
+	<script>
+		require.config({ baseUrl: '../../' });
+
+		require([
+			'seriously',
+			'effects/seriously.slicer',
+			'effects/seriously.blur'
+		], function (Seriously) {
+			'use strict';
+			
+			var seriously, 
+				target,
+				slicer, slicerControl = {}, sliceAnimator, lastTime=0,
+				animationSpeedSlider, animationSpeedSliderChange,
+				blur;
+
+			seriously = new Seriously();
+			target = seriously.target('#canvas');
+
+			// make the slicer and assign some controls
+			slicer = seriously.effect('slicer', slicerControl);
+			slicer.noiseAmount= '#noiseAmount';
+			slicer.ySpread= '#ySpread';
+			
+			blur = seriously.effect('blur');
+			blur.amount = '#blur-amount';
+			
+			// connect the nodes together
+			slicer.source = '#image';
+			blur.source = slicer;
+			target.source = blur;
+			
+			// bind ui controls for slicer uniforms
+			slicer.ySpread = '#ySpread';
+			slicer.noiseAmount = '#noiseAmount';
+			blur.amount = '#blur-amount';
+			
+				
+			/*
+			 * 	Using slicerControl is optional. Has some utils for setting/controlling the slice positions. 
+			 *	You could just use the vec4 sliceA and sliceB uniforms exposed on the slicer object instead.
+			 *	
+			 *	reset() // resets all slices to be evenly spread from left to right
+			 *	randomise() // randomise slice x positions
+			 *	setSlicePositions(an8ElementArrayOfFloats) // set the 8 slice positions manually - positions are normalised, use increasing values between 0 and 1
+			 *	getSlicePositions(targetArray) // sets the target array with the current slice positions, from 0 to 7
+			*/	
+			animationSpeedSlider = document.getElementsByName('animation-speed')[0];
+			animationSpeedSliderChange = function(){
+				var val = parseFloat(animationSpeedSlider.value);
+				sliceAnimator.sliceTransitionSpeed = val;
+				sliceAnimator.newSlicesSelectTime = 4000 - val*140000;
+			};
+			animationSpeedSlider.addEventListener('change',animationSpeedSliderChange);
+			animationSpeedSlider.addEventListener('input',animationSpeedSliderChange);
+			
+			document.getElementById('reset').addEventListener('click', function(){
+				slicerControl.reset();
+				sliceAnimator.reset();
+			});
+			document.getElementById('randomise').addEventListener('click', function(){
+				slicerControl.randomise();
+				sliceAnimator.reset();
+			});
+			document.getElementById('animation-toggle').addEventListener('click',function(){
+				var state = this.checked;
+				document.getElementById('animation-speed').style.opacity= state ? 1 : 0.5;
+				document.getElementsByName('animation-speed')[0].disabled=!state;
+				if(state) sliceAnimator.reset();
+				sliceAnimator.enabled = state;
+				animationSpeedSliderChange();
+			});
+		
+			// a quick example animating the slice positions over time
+			sliceAnimator = {
+				enabled: false,
+				newSliceTimer: 1e6,
+				newSlicesSelectTime: 5000, // millis
+				sliceTransitionSpeed: 0.0002,
+				
+				currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
+				targetSlices: new Float32Array([0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]),
+				
+				reset:function(){
+					slicerControl.getSlicePositions(this.currentSlices);
+					this.pickNewTargets();
+				},
+				updateSlices: function(dt){
+					var t = this,
+						targets = t.targetSlices,
+						current = t.currentSlices,
+						c;
+					
+					t.newSliceTimer += dt;
+					if (t.newSliceTimer >= t.newSlicesSelectTime) {
+						t.pickNewTargets();
+					}
+					
+					// move slices toward targets...
+					for (var i=0; i<8; i++) {
+						c = current[i];
+						current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
+					}
+					
+					slicerControl.setSlicePositions(t.currentSlices);
+				},
+				pickNewTargets: function(){
+					this.newSliceTimer = 0;
+					var count = Math.round(6 + (Math.random() * 2));
+					var stripWidth = 1.0 / count;
+					for (var i=0; i<8; i++) {
+						this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+					}
+				}
+			};
+		
+			// start everything going
+			seriously.go(
+				function(){
+					// before each render
+					var now = performance.now(),
+						dt = now - lastTime;
+					
+					slicer.seed = 1.0 + Math.random() * 1024;
+					
+					if(sliceAnimator.enabled){
+						sliceAnimator.updateSlices(dt);
+					}
+					
+					lastTime = now;
+				}
+			);
+		}
+	);
+</script>	
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e6762ab..6adb390 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,7 @@
 		<script type="text/javascript" src="effects/seriously.vibrance.js"></script>
 		<script type="text/javascript" src="effects/seriously.vignette.js"></script>
 		<script type="text/javascript" src="effects/seriously.split.js"></script>
+		<script type="text/javascript" src="effects/seriously.slicer.js"></script>
 		<style>
 
 		body {