JoshOohAhh JoshOohAhhAi

Animated gradient buttons with GSAP and tsParticles

Ball on a colorful grid (CSS only)

CSS Only 3D Tagcloud V2

A 3D tagcloud that works completely without JavaScript.

You can control the direction of rotation of the tag cloud by clicking outside the tag cloud. The direction of rotation depends on where you click.

If you want to change the appearance, change the values of the CSS variables.

Adding new tags is very easy. Simply create a new li tag in ul. It is important to set the variable --index and to update the variable --num-elements in the ul, i.e. the tagcloud, accordingly.

Hexagon Grid - Ripple Effect

A dynamic hexagon grid showcasing an engaging ripple effect, complemented by two versatile themes. Utilize the theme switcher to seamlessly alternate between the vibrant synthwave and the sleek Vision UI theme.

The background image was generated by DALL·E 3, an AI from OpenAI that creates visual content from textual prompts.

A Pen by Konstantin Denerz on CodePen.

License.

Cube Effect Slider | Swiper JS and tsParticles

This pen features a responsive landing page with a cube-effect slider powered by Swiper JS and an animated background created using tsParticles.

Note: Please do not use this on commercial platforms or projects without permission.

A Pen by Ecem Gokdogan on CodePen.

License.

	<main id="app" class="dark">

	<button class="" data-effect="flicker">
	<span class="text">Hover me, and change the effect below!</span>
	<span class="shimmer"></span>
	</button>

	<section class="selection">
	<label><input type="radio" name="style" value="spin" /> spin</label>
	<label><input type="radio" name="style" value="wipe" /> wipe</label>

	<div class="card">
	<svg
	viewBox="0 0 100% 100%"
	xmlns='http://www.w3.org/2000/svg'
	class="noise"
	>
	<filter id='noiseFilter'>
	<feTurbulence
	type='fractalNoise'
	baseFrequency='0.85'

	<body>
	<div class="swiper-container">
	<div class="swiper-wrapper">
	<div class="swiper-slide">
	<div class="content" data-content="one">
	<h1>Hallstatt, Austria</h1>
	<p>
	Visit Hallstatt, Austria, a beautiful village by a clear lake,
	surrounded by tall mountains. Walk through old streets, see
	ancient salt mines, and enjoy the peaceful views. This tour is

	<div class="page">
	<div class="header">
	How it's done
	</div>
	<div class="content">
	<p>
	The HTML content you're reading right now is overlaid with a full-screen <b><canvas></b> element.
	There is a fragment shader that defines opacity and color for each pixel of the <b><canvas></b>.
	Shader input values are <b>scroll progress (aka animation progress)</b>, <b>time</b>, and <b>resolution</b>.
	</p>

	<div class="content">
	<div class="section">
	<div>
	Neural Noise
	</div>
	</div>
	<div class="section">
	<div>
	GLSL shader based on <a href="https://x.com/zozuar/" target="_blank">@zozuar</a> <a href="https://x.com/zozuar/status/1625182758745128981/" target="_blank">artwork</a>
	</div>