hackur

Animated Process Steps

I wanted to add animation to a css/pug process steps component with minimal javascript. Changing classes fires the animation, the only problem I came across was when going backwards in steps the transition delays started to break up so I had to add a bit more js.

A Pen by Ian Egner on CodePen.

License.

hackur

graph TD
    Protocol
    Protocol --> ContextOriented[Context-Oriented]
    Protocol --> InterAgent[Inter-Agent]

    ContextOriented --> COGeneral[General-Purpose]
    ContextOriented --> CODomain[Domain-Specific]
    COGeneral --> MCP[MCP]
 CODomain --> AgentsJSON[agents.json]

hackur

Hybrid Memory Bank System

!!I WILL ALWAYS FOLLOW THE FRAMEWORK RULES PROVIDED IN THIS PROMPT!!

!!! ATTENTION: Core System Definition I am an expert software engineer and architect. My operational memory resets between sessions, necessitating meticulous documentation via this Memory Bank system. I rely on this system to regain context and continue work effectively. I employ a flexible and adaptive context loading strategy with explicit memory management to balance comprehension with efficiency.

Core Operating Principle: I aim to function autonomously where possible, making appropriate decisions based on available context and confidence level. I request user input strategically only when facing critical ambiguity, low confidence on high-impact decisions, or explicit validation requirements. I acknowledge that perfect documentation synchronization is challenging and focus on maintaining a practical, accurate representation of current state and planned actions.

Adaptive Approach: I scale my pro

hackur

%MACROS Preamble = "I am an expert software-engineer/architect. Memory resets every session, therefore I persist & load docs exactly as below, using explicit paging for token-efficiency." FM = "timestamp|status|ids|confidence" # front-matter tuple CHECK = "[VAL] verify; [GAP] info-gap; [CONS] consistency" # tri-checkpoint list %END

%SYMBOLS # one-byte UTF-8 saves tokens yet stays readable 📥 ACTIVE_MEMORY 📤 CACHED_MEMORY 🗄️ ARCHIVED_MEMORY

hackur

Direction-aware 3D hover effect (Concept)

After seeing this site http://fitzfitzpatrick.com/ I decided to give a try to the "direction-aware hover effect". My first thought was to do it with a pure CSS, not too late I changed my mind and decided to use JS (I need to sleep anyway).

It's kind of simple, using JS we can easily detect the direction the cursor is coming, then, I am using CSS animations for each case (8 in total).

A Pen by Jeremy Sarda on CodePen.

License.

hackur

CodePen Challenge: Card Carousel

A Pen by Gemma Croad on CodePen.

License.

hackur

<header class="fake-shader">
  <h1>Who needs shaders?</h1>
  <p>Just HTML and CSS. Scroll down for more.</p>
</header>
<section> 
  <h2>How does this work?</h2>
  <p>I'm using 3 tiny blurry images encoded as base64 strings</p>
  <ul class="images">
    <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAXCAYAAABqBU3hAAAMEElEQVR4AQCBAH7/AIKs5/+CrOf/gqzn/4Gs5/9/quX/e6bi/3ai3f9xndj/a5jT/2iUz/9mk87/ZpPO/2iW0P9rmdP/bZvV/26d1v9unNX/a5nR/2eVzP9ikMb/XovA/1qHu/9Yhbj/WIW3/1mFtv9ahbb/WoW1/1mEs/9XgrD/VYCt/1N9q/9SfKn/AIEAfv8AiLDp/4ix6f+Isen/h7Dp/4Wu5/+Cq+T/faff/3eh2v9yndb/bpnS/22Y0f9tmdH/b5vT/3Kf1v91otn/d6Pa/3aj2f90oNX/b5zQ/2qWyv9mkcT/Yo2//2CLvP9girr/YIq5/2GKuP9hirf/YIm1/16Hs/9chLD/WoKt/1iBrP8AgQB+/wCUue3/lLnt/5S57f+TuO3/kbbr/46z6P+Jr+P/hKre/3+m2v97otf/eqHW/3uj1/99ptn/gand/4St4P+Gr+H/hq/g/4Os3f9/p9j/eqLR/3Wdy/9xmMb/bpXC/22UwP9tk77/bZO9/22TvP9skbr/ao+3/2iNtP9lirH/ZImw/wCBAH7/AKTD8f+kw/H/pMPx/6PD8f+hwe//nr7s/5m66P+UteP/j7Hf/4yu3P+Lrdv/jK/d/5Cz4P+Ut+T/mLvo/5q96v+aven/mLvm/5O24f+Nsdr/iKvT/4Omzf+Aosj/fqDF/32fw/9

hackur

CSS 3D Card with Vanilla Tilt

An interactive card with a 3D parallax tilt effect using vanilla-tilt.js and CSS transforms.

A Pen by Puneet | Techartist on CodePen.

License.

hackur

Flowchart

flowchart LR
    A[If I] --> B{could};
    B -- Yes --> C[I would];
    C --> D[Let it go, Surrender, Dislocate];

Pie chart

hackur

<?php

/**
 *
 * VehicleHistory.com
 *
 * Online Assessment - Question #3
 *
 */