MP

Section 01 — Hero Reveal

MOTION PATTERNS

A self-contained showcase of the animation patterns observed on pkshatech.com.

SCROLL

Section 02 — Clip-path Wipe

Reveal with clip-path

Elements are masked with clip-path: inset(0 100% 0 0) and animated to inset(0 0 0 0) using cubic-bezier(.43, .05, .17, 1) over 0.8s, with a 0.9s opacity follow. The mask sweeps left-to-right, revealing both text and image in a single coordinated motion.

Section 03 — Polygon Cards

Custom shaped cards

01

Homebase

polygon(0 0, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem))

02

Arrow

polygon(0 0, calc(100% - 4rem) 0, 100% 50%, calc(100% - 4rem) 100%, 0 100%)

03

Circle

circle(48.2%) — standard radial mask used for icons and avatars.

Section 04 — Rotating Ring

Decorative ring rotation

Three concentric rings rotate at different speeds and directions. Opacity pulses on independent cycles. A radial flare drifts in position and scale over a 7-second loop, producing organic motion without any JavaScript driver.

Section 05 — Gradient Loop

Background that breathes

background-position animates 0% → 100% → 0% on a 20-second linear loop, applied over a 300%-wide gradient. The result is a slow hue drift that never repeats visibly within a normal viewing session.