Skip to content
← Back to experiment
[ EXP-035 / PLAYGROUND MODE ]

Tech Logo Glitch Swap / Playground

Replace an About technology icon beneath two offset, tinted logo slices.

TransitionsReactWeb APIsCSSclick
EXP-035 / LIVE PREVIEW
STATIC / REDUCED MOTION
REDUCED MOTION / STATIC RESULT

Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.

01 / Overview

Replace an About technology icon beneath two offset, tinted logo slices. Adapted from the portfolio implementation listed below, with manual playback for inspection.

Portfolio implementation

  • src/components/hero/AboutInterface.jsx
  • src/styles/hero-about.css
  • src/data/techStack.js

02 / How it works

The About tool grid selects and preloads an unused logo, distorts its base and two clipped duplicates, swaps the asset midway through a 320 ms burst, then returns to neutral. Hover and keyboard focus defer automatic swaps in the portfolio. This manual study uses the supplied PostgreSQL and PowerShell assets with adjustable timing.

03 / Implementation

Actual React demo source. Import this component with the archive stylesheet and pass variant (toolSwap), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.

Loading implementation…

04 / Parameters

ParameterTypeRangeDefault
DurationNumber0.4–3s0.9s
IntensityNumber0.2–10.6

05 / Usage & accessibility

This is a contained portfolio-derived study, not the full page controller. Play starts one transition; Replay resets it. Pause freezes active timelines. Scroll Camera Glitch requires scrolling inside its focusable preview after Play. Reduced motion shows a stable composition. Frames, timelines and local listeners are released on unmount.

Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.

Related experiments.

Return to archivePortfolio