cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="wrapper">
  <h1>Goo Blobs</h1>

  <h2>Some Sweet Filler Text</h2>
  <p>Danish chocolate cake sweet gummies wafer brownie cake sugar plum. Macaroon dessert tiramisu bear claw jelly toffee chocolate cake. Chocolate cake soufflé wafer sesame snaps chocolate cake. Chocolate jelly gummi bears pastry macaroon cake sweet roll. Marzipan gingerbread chocolate bar sugar plum chocolate bar marshmallow.</p>
  <p>Bonbon marzipan ice cream. Croissant tart liquorice powder macaroon toffee pastry. Cheesecake sugar plum dragée. Brownie sugar plum icing cake pudding cotton candy marshmallow cheesecake croissant. Marshmallow oat cake marshmallow oat cake caramels chupa chups cheesecake biscuit cotton candy.</p>
  <p>Ice cream liquorice donut dessert marzipan bonbon sweet roll. Fruitcake fruitcake oat cake liquorice pastry gummi bears powder. Ice cream cheesecake topping.</p>

  <h2>Keep Scrolling</h2>
  <p>Lollipop pie marzipan cupcake danish muffin sugar plum lollipop. Lemon drops gummies biscuit chupa chups cotton candy oat cake liquorice soufflé. Chocolate cake candy canes marzipan cheesecake bear claw. Oat cake toffee cotton candy tiramisu pudding gummi bears.</p>
  <p>Chupa chups chocolate cake danish jelly beans cotton candy chocolate bar caramels sesame snaps wafer. Sweet roll bonbon bonbon pudding. Tiramisu sweet icing.</p>
  <p>Pudding croissant cookie tiramisu lemon drops halvah dessert cupcake lemon drops. Muffin dragée halvah bonbon danish. Jelly-o liquorice wafer croissant. Sesame snaps chocolate cake chupa chups pie powder sweet roll ice cream jelly. Cotton candy caramels cheesecake macaroon carrot cake tiramisu sesame snaps icing macaroon. Chupa chups chupa chups jujubes powder chocolate bar chocolate bar. Brownie powder soufflé.</p>
  <p>Chocolate cake carrot cake sweet gummi bears bear claw pastry candy canes. Bear claw donut bear claw cheesecake soufflé sugar plum gummies gummi bears. Jelly-o gummies cake powder carrot cake gingerbread icing. Jujubes sugar plum jujubes cupcake chocolate cake chupa chups cotton candy toffee. Topping topping sweet roll muffin candy canes toffee. Danish cotton candy pastry dessert gummies sweet roll. Danish donut jelly. Caramels pastry halvah dragée apple pie. Chocolate toffee tart cheesecake jujubes marshmallow lemon drops. Cake fruitcake bonbon lollipop tootsie roll.</p>

  <h2>Physics-Based Visuals</h2>
  <p>Jelly beans gummies toffee chocolate cake jelly beans. Cotton candy biscuit gummies. Oat cake marzipan soufflé bonbon sugar plum cheesecake dessert. Sweet roll liquorice jujubes soufflé pudding carrot cake. Toffee powder apple pie oat cake. Pastry jelly chocolate macaroon chocolate bar tart croissant. Candy canes cookie cotton candy jelly-o wafer sweet chupa chups sweet cotton candy. Carrot cake gummi bears cake topping powder bonbon danish toffee pudding. Ice cream muffin macaroon. Bear claw brownie pudding.</p>
  <p>Tart toffee carrot cake sweet roll powder sweet roll. Sweet roll soufflé sweet roll dragée sweet roll. Wafer wafer dragée. Cake chocolate chocolate bar carrot cake pie jelly-o oat cake jujubes carrot cake. Marshmallow candy topping. Carrot cake apple pie jelly beans fruitcake halvah biscuit pie gingerbread powder. Dragée pie jelly beans jelly biscuit. Powder lollipop cheesecake icing oat cake ice cream bear claw. Dessert topping sweet oat cake pastry. Marshmallow topping lollipop sesame snaps carrot cake jujubes.</p>
  <p>Lollipop cake bonbon caramels fruitcake jujubes. Tootsie roll danish pastry sugar plum tiramisu. Pie sweet roll jujubes danish chocolate. Apple pie wafer powder topping. Fruitcake cupcake marshmallow croissant cotton candy marzipan muffin. Cookie candy canes cheesecake donut cotton candy carrot cake cake halvah dragée. Gummi bears toffee bear claw powder danish. Sesame snaps apple pie cake danish.</p>
  <p>Danish muffin lollipop gingerbread jujubes dragée. Gummi bears cupcake lemon drops chupa chups chupa chups bonbon muffin danish fruitcake. Sweet caramels jelly beans candy canes pie. Danish ice cream chocolate toffee.</p>

  <h2>Something Different</h2>
  <p>Cake gummi bears dessert chocolate bar dessert oat cake powder tootsie roll jelly beans. Cake wafer bear claw jujubes caramels sugar plum. Apple pie bonbon ice cream dragée macaroon marshmallow icing danish. Powder gummi bears tootsie roll. Lemon drops icing gummies cookie wafer bonbon cake. Sweet danish oat cake wafer muffin chocolate cake carrot cake. Macaroon ice cream dragée gingerbread pastry jujubes danish.</p>
  <p>Wafer pastry ice cream gummies gummies oat cake. Ice cream gummies liquorice cheesecake. Tiramisu cookie jelly. Tart jelly beans soufflé cheesecake dragée gummi bears apple pie.</p>
  <p>Lemon drops oat cake marshmallow apple pie apple pie tart. Dragée lollipop jelly chupa chups muffin chocolate jujubes. Caramels cookie bear claw. Caramels tootsie roll pudding apple pie chocolate muffin dessert jelly-o.</p>
  <p>Brownie sweet roll chocolate cake ice cream sweet roll topping pie marshmallow. Biscuit pastry wafer lollipop. Carrot cake bonbon bear claw croissant fruitcake toffee sugar plum jujubes brownie. Candy canes pastry halvah. Muffin brownie jelly-o cupcake ice cream muffin muffin tiramisu.</p>

  <h2>Will Boyd Says Hi</h2>
  <p>Powder sweet donut biscuit. Lemon drops chocolate gummies sweet gummi bears macaroon. Cupcake tiramisu chocolate cake chocolate. Cake pastry brownie marshmallow sweet bonbon bonbon oat cake caramels. Pastry tart gummies. Gummies danish tart gummi bears tootsie roll. Pastry candy cookie cheesecake toffee chocolate jujubes apple pie. Gingerbread marzipan icing gummi bears pastry pudding sugar plum. Dessert biscuit carrot cake sweet roll sweet.</p>
  <p>Macaroon wafer liquorice. Candy canes sweet tootsie roll. Caramels liquorice jelly chocolate cake chocolate biscuit jelly-o. Apple pie marshmallow wafer tootsie roll cake toffee soufflé ice cream. Chocolate cake danish jujubes tart muffin tootsie roll jelly-o. Croissant pastry tootsie roll. Cookie biscuit donut fruitcake tootsie roll apple pie candy sweet roll.</p>
  <p>Sugar plum gingerbread bonbon danish croissant candy canes. Macaroon pie caramels sugar plum muffin marshmallow lollipop dessert. Soufflé tootsie roll sweet roll gummies jelly beans. Liquorice cotton candy dragée cheesecake marzipan cheesecake gummi bears muffin.</p>
</div>
<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="
                                                     1 0 0 0 0
                                                     0 1 0 0 0
                                                     0 0 1 0 0
                                                     0 0 0 50 -16
                                                     " result="matrix" />
      <feBlend in="SourceGraphic" in2="matrix" />
    </filter>
  </defs>
</svg>
<canvas id="bg1"></canvas>
<canvas id="bg2"></canvas>

            
          
!
            
              *, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0 10%;
	color: #915b4e;
	background-color: #edffff;
	font: 1.25rem/1.5 'Roboto', sans-serif;
}

.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background-color: rgba(255, 255, 255, 0.5);
	background: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.5) 20px,
		rgba(255, 255, 255, 0.65) 20px,
		rgba(255, 255, 255, 0.65) 40px
	);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

h1, h2 {
	margin: 0;
	line-height: 1.25;
}

h1 {
	padding: 10px 0;
	border-top: 10px solid;
	font-size: 3rem;
	text-transform: uppercase;
}

h2 {
	margin-top: 40px;
	font-size: 1.5rem;
	border-left: 10px solid;
	padding-left: 15px;
}

svg {
	display: none;
}

canvas {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
}

#bg1 {
	z-index: -1;
	filter: url('#goo');
}

#bg2 {
	z-index: -2;
	filter: url('#goo') blur(4px);
}

@media screen and (min-width: 500px) {
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 2rem;
	}
}

            
          
!
            
              // plugin
Matter.use('matter-wrap');

let gooBlobs = {
	// customizable options (passed into init function)
    options: {
		canvasSelector: '',				// to find <canvas> in DOM to draw on
		radiusRange: [75, 150],			// random range of body radii
		xVarianceRange: [-1, 1],		// random range of x velocity scaling on bodies
		yVarianceRange: [0.5, 1.5],		// random range of y velocity scaling on bodies
		airFriction: 0.04,				// air friction of bodies
		opacity: 1,						// opacity of bodies
		collisions: false,				// do bodies collide or pass through
		scrollVelocity: 0.015,			// scaling of scroll delta to velocity applied to bodies
		pixelsPerBody: 50000,			// viewport pixels required for each body added

		// colors to cycle through to fill bodies
		colors: ['#bad4cf']
	},

	// throttling intervals (in ms)
	scrollDelay: 100,
	resizeDelay: 400,

	// throttling variables and timeouts
	lastOffset: undefined,
	scrollTimeout: undefined,
	resizeTimeout: undefined,

	// Matter.js objects
	engine: undefined,
	render: undefined,
	runner: undefined,
	bodies: undefined,

	// kicks things off
	init(options) {
		// override default options with incoming options
		this.options = Object.assign({}, this.options, options);

		let viewportWidth = document.documentElement.clientWidth;
		let viewportHeight = document.documentElement.clientHeight;

		this.lastOffset = window.pageYOffset;
		this.scrollTimeout = null;
		this.resizeTimeout = null;
	
		// engine
		this.engine = Matter.Engine.create();
		this.engine.world.gravity.y = 0;
	
		// render
		this.render = Matter.Render.create({
			canvas: document.querySelector(this.options.canvasSelector),
			engine: this.engine,
			options: {
				width: viewportWidth,
				height: viewportHeight,
				wireframes: false,
				background: 'transparent'
			}
		});
		Matter.Render.run(this.render);
	
		// runner
		this.runner = Matter.Runner.create();
		Matter.Runner.run(this.runner, this.engine);
	
		// bodies
		this.bodies = [];
		let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody);
		for (let i = 0; i <= totalBodies; i++) {
			let body = this.createBody(viewportWidth, viewportHeight);
			this.bodies.push(body);
		}
		Matter.World.add(this.engine.world, this.bodies);

		// events
		window.addEventListener('scroll', this.onScrollThrottled.bind(this));
		window.addEventListener('resize', this.onResizeThrottled.bind(this));
	},
	
	// stop all the things
	shutdown() {
		Matter.Engine.clear(this.engine);
		Matter.Render.stop(this.render);
		Matter.Runner.stop(this.runner);

		window.removeEventListener('scroll', this.onScrollThrottled);
		window.removeEventListener('resize', this.onResizeThrottled);
	},
	
	// random number generator
	randomize(range) {
		let [min, max] = range;
		return Math.random() * (max - min) + min;
	},
	
	// create body with some random parameters
	createBody(viewportWidth, viewportHeight) {
		let x = this.randomize([0, viewportWidth]);
		let y = this.randomize([0, viewportHeight]);
		let radius = this.randomize(this.options.radiusRange);
		let color = this.options.colors[this.bodies.length % this.options.colors.length];
	
		return Matter.Bodies.circle(x, y, radius, {
			render: {
				fillStyle: color,
				opacity: this.options.opacity
			},
			frictionAir: this.options.airFriction,
			collisionFilter: {
				group: this.options.collisions ? 1 : -1
			},
			plugin: {
				wrap: {
					min: { x: 0, y: 0 },
					max: { x: viewportWidth, y: viewportHeight }
				}
			}
		});
	},
	
	// enforces throttling of scroll handler
	onScrollThrottled() {
		if (!this.scrollTimeout) {
			this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
		}
	},
	
	// applies velocity to bodies based on scrolling with some randomness
	onScroll() {
		this.scrollTimeout = null;

		let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity;
		this.bodies.forEach((body) => {
			Matter.Body.setVelocity(body, {
				x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange),
				y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange)
			});
		});
	
		this.lastOffset = window.pageYOffset;
	},
	
	// enforces throttling of resize handler
	onResizeThrottled() {
		if (!this.resizeTimeout) {
			this.resizeTimeout = setTimeout(this.onResize.bind(this), this.resizeDelay);
		}
	},
	
	// restart everything with the new viewport size
	onResize() {
		this.shutdown();
		this.init();
	}
};

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
	// start first goo blobs background
	Object.create(gooBlobs).init({
		canvasSelector: '#bg1'
	});
	
	// start second goo blobs background
	Object.create(gooBlobs).init({
		canvasSelector: '#bg2',
		yVarianceRange: [-1.5, -0.5],
		pixelsPerBody: 30000,
		colors: ['#d3f0ea']
    });
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console