Effects - Zariep-Software/WiPersona GitHub Wiki

WiPersona supports simple effects that distort the avatar:

These effects are hardcoded; therefore, they can be modified with a CSS editor if you have knowledge of CSS.

[!NOTE] Due to the transformations required to position the avatar, every effect needs to readjust (transform: translate(-50%, -50%)) the avatar because of the class change.

1. Bounce Effect

The Bounce effect makes the avatar bounce like a ball, creating a lively and playful animation.

CSS Code

.bounce {
	animation: bounce 0.4s; /* Duration: 0.4 seconds */
}

@keyframes bounce {
	10%  { transform: translate(-50%, -50%) translateY(0%); } /* Starting position */
	30%  { transform: translate(-50%, -50%) translateY(-5%); } /* Upward movement */
	50%  { transform: translate(-50%, -50%) translateY(0%); } /* Return to original position */
	65%  { transform: translate(-50%, -50%) translateY(-5%); } /* Upward movement */
	77%  { transform: translate(-50%, -50%) translateY(0%); } /* Return to original position */
	99%  { transform: translate(-50%, -50%) translateY(-3%); } /* Slight upward movement */
	100% { transform: translate(-50%, -50%) translateY(0%); } /* Return to original position */
}


2. Shake Effect

The Shake effect shakes the avatar rapidly, creating an aggressive and attention-grabbing animation. It is essentially a faster version of the bounce effect.

CSS Code

.shake {
	animation: bounce 0.1s; /* Duration: 0.1 seconds */
}

3. Gelatine Effect

The Gelatine effect simulates a gelatin-like wobble. This effect gives a bouncy, soft look to the avatar, making it feel more dynamic.

CSS Code

.gelatine {
	animation: gelatine 0.5s 0.5; /* Duration: 0.5 seconds */
}

@keyframes gelatine {
	from, to { transform: translate(-50%, -50%) scale(1, 1); } /* Normal size */
	25% { transform: translate(-50%, -50%) scale(0.9, 1.1); } /* Slight compression */
	50% { transform: translate(-50%, -50%) scale(1.1, 0.9); } /* Slight expansion */
	75% { transform: translate(-50%, -50%) scale(0.95, 1.05); } /* Return to original */
}

4. Pulse Effect

The Pulse effect creates a pulsing animation that makes the avatar appear to grow and shrink, simulating a heartbeat.

CSS Code

.pulse {
	animation: pulse 0.2s 1; /* Duration: 0.2 seconds */
}

@keyframes pulse {
	from, to { transform: translate(-50%, -50%) scale(1, 1); } /* Normal size */
	50% { transform: translate(-50%, -50%) scale(1.2, 1.2); } /* Grow larger */
	75% { transform: translate(-50%, -50%) scale(1.2, 1.2); } /* Hold large size */
}

5. Swing Effect

The Swing effect makes the avatar swing back and forth, resembling a pendulum motion. This adds a dynamic element to the avatar's behavior.

CSS Code

.swing {
	transform-origin: bottom center; /* Pivot point for swinging */
	animation: swing 0.5s; /* Duration: 0.5 seconds */
}

.swingtop {
	transform-origin: top center; /* Pivot point for swinging */
	animation: swing 0.5s; /* Duration: 0.5 seconds */
}

@keyframes swing {
	20% { transform: translate(-50%, -50%) rotate(10deg); } /* Swing to the right */
	40% { transform: translate(-50%, -50%) rotate(-10deg); } /* Swing to the left */
	60% { transform: translate(-50%, -50%) rotate(5deg); } /* Slightly back to the right */
	80% { transform: translate(-50%, -50%) rotate(-5deg); } /* Slightly back to the left */
	100% { transform: translate(-50%, -50%) rotate(0deg); } /* Return to original position */
}

Brightness Effects

[!Note] Due to CSS limitations, although the brightness effects animations are programmed, they are not applied because they overlap with the animations of other effects.

1. Bright Effect

The Bright effect increases the brightness of the avatar, giving it a glowing appearance. This effect can be used to highlight the avatar.

CSS Code

#Avatar.Silence.bright {
/*
	--brightness-input: 1.5;
	--brightness-output: 1;
	animation: dim 0.5s forwards;
*/
	filter: brightness(1); /* Set brightness to original value if is muted */
}
#Avatar.Speak.bright {
/*
	--brightness-input: 1;
	--brightness-output: 1.5;
	animation: dim 0.5s forwards;
*/
	filter: brightness(1.5); /* Set brightness higher when speaking*/
}
#Avatar.Speak.bright0 {
	filter: brightness(1.5); /* Fix for when transitioning from speaking to screaming */
}
#Avatar.Scream.bright {
	filter: brightness(1.5); /* Fix for when transitioning from speaking to screaming */
}

/* Unused keyframe,smoothly changes the brightness /*
@keyframes dim {
	from {
		filter: brightness(brightness(var(--brightness-input)));
	}
	to {
		filter: brightness(var(--brightness-output));
	}
}

2. Dim Effect

The Dim effect decreases the brightness of the avatar, creating a darker look. This can be used to indicate an inactive or less important state, in fact is a modified Bright effect

CSS Code

.dim {
	filter: brightness(0.5); /* Dim brightness level */
	transition: filter 0.5s ease; /* Smooth transition effect */
}