HIPM
The HIPM framework is a collaborative effort — my contribution: the design, the web UI and multiple AI generators that produce HIPM artefacts. Holographic phase wheel in R3F, 2D-canvas particle field, converging-orbs landing animation, glassmorphism throughout — built with Three.js + R3F + Framer Motion, no templates, every pixel hand-crafted.
Each card is a different combination of Three.js, R3F, and Framer Motion. The opening orb animation of the landing, the scroll-triggered pinning of "Drei Welten", the kinetic 5-phase wheel with physics-based interactions, and the gate matrix with holographic materials.
↓ Click to interact · move mouse away or scroll to releaseHIPM
Projektmanagement. Neu gedacht.
Three Worlds. One Framework.
HIPM unites the strengths — and dissolves the weaknesses.
The 5-Phase Model
Click a phase for details
Create clarity, secure the mandate
Turn orientation into commitment
Deliver results, create value
Look honestly, get better
Secure results, close the project
Quality through deliberate decision points.
Five gates safeguard progress — click a gate for details
Can we start this project in a structured way?
Criteria
- AProject purpose is clear, sponsor legitimized
- BRoles named, escalation paths clear
- CStakeholders identified, interests known
- DApproach framework defined
- EAI role documented
Abort
No sponsor or unresolvable goal conflicts
Fallback
Conflicting goals or unstable governance
Do we have a resilient framework for execution?
Criteria
- ADeliverables defined and prioritized
- BExecution model set
- CDecision paths documented
- DTimeframe and dependencies known
- EAI usage defined with clear boundaries
Abort
No viable execution perspective
Fallback
Open goal or governance questions
Have we demonstrably created value?
Criteria
- AIncrements produced and accepted
- BProgress documented, deviations justified
- CRisk register updated
- DStakeholders informed regularly
- EAI outputs documented, human reviewed
Abort
Project goal no longer achievable
Fallback
Scope change requires replanning
Have we reflected honestly and drawn consequences?
Criteria
- AResults checked against criteria
- BRetrospective held, actions formulated
- CLessons learned captured
- DAI effectiveness analyzed
- EPlan changes documented and released
Abort
Results fundamentally miss the objective
Fallback
Rework needed or planning errors identified
Is the project fully closed?
Criteria
- ASponsor confirms goal attainment
- BResults handed over, responsibility clarified
- CLessons learned finalized and accessible
- DAI tools handed over or shut down
- EResources released, portfolio updated
Abort
Final gate — only fallback possible
Fallback
Handover failed or insights missing
Standards Integrated
Interactive Components
Quality Gates
Defined Roles
The Code Behind It
Holographic materials, physics-based interactions, and scroll-driven animations — all custom-built. No templates, no UI kits.
// Each phase is an extruded arc with a custom holo shader —
// fresnel rim glow, scanlines, flicker, all driven by uTime.
const geometry = useMemo(
() => createArcGeometry(
WHEEL_INNER_RADIUS, WHEEL_OUTER_RADIUS,
start, end, WHEEL_DEPTH,
),
[start, end],
);
return (
<mesh geometry={geometry}>
<HoloMaterial
color={PHASE_COLORS_HEX[phaseName]}
opacity={isActive ? 0.55 : 0.3}
glowIntensity={isHovered ? 1.6 : 1.0}
/>
</mesh>
);The Generators
Beyond the framework UI I built a suite of AI generators for the START phase — four active so far: Projektsteckbrief, Stakeholder-Analyse, Risikoübersicht, and Kommunikationsplan. The PLAN, DO, REVIEW, and GOAL phases are scaffolded as coming soon. Each generator is a web interface wired to Claude via the Anthropic API, running the same 3-step decision flow: AI thinks → Human steers → AI finalises.
The flow is the whole point. Step 1 — AI thinks. You drop in a rough description of the project and Claude drafts a structured artifact. Instead of guessing at missing facts, it surfaces them as typed follow-up questions (Rückfragen) embedded in the draft — the places where the project is still unclear, contradictory, or under-specified. Step 2 — Human steers. Each question is rendered as its own card with a dedicated input. You answer them one by one; nothing advances until the gaps are closed by a human who actually knows the project. Step 3 — AI finalises. Claude takes the original draft plus every answer, runs a consistency check, rewrites the artifact, and produces a Reifegrad (maturity) score — both as per-dimension breakdown (Vollständigkeit, Konsistenz, Entscheidungsreife) and as an overall recommendation: Go (≥80%) / Hold (50-79%) / Überarbeitung (<50%). The decision itself stays with the human; the AI just argues for one.
The trick is in the system prompt. The AI is not framed as a writer but as a challenger: it structures input, finds gaps and contradictions, asks uncomfortable follow-ups — but it does not close gaps on its own. Clarity over completeness. The decision stays with the human; the AI just makes it impossible to skip the hard questions.
// SCHRITT 1 — KI DENKT. Challenger-Mode, kein Schreiber.
export const SCHRITT_1_SYSTEM = `Du bist der Artificial Master
im HIPM-Framework (Hybrid Intelligent Project Management).
Deine Aufgabe: Aus unstrukturierten Projekt-Informationen einen
detaillierten Projektsteckbrief-ENTWURF generieren.
Du bist ein Challenger — kein Schreiber:
- Strukturiere, was der Mensch liefert
- Finde Lücken und Widersprüche
- Stelle unbequeme Rückfragen
- Schließe KEINE Lücken selbst — mache sie sichtbar
HIPM basiert auf ISO 21500, PMBOK, ICB 4, ISO 31000 und DIN 69901,
kombiniert mit Scrum-DNA und ist auf KMU zugeschnitten.`;And what the generator actually looks like
Projektsteckbrief
Vollständiger Steckbrief nach HIPM-Standard
KI DENKT
Generiert Entwurf + Rückfragen
MENSCH LENKT
Beantworte Rückfragen, korrigiere
KI FINALISIERT
Überarbeitung + Konsistenzprüfung + Reifegrad
Gespeicherte Pläne (1)
HIPM_Steckbrief_V002
10.03.2026, 18:45
Behind the UI
There's a real backend underneath. Supabase handles auth, row-level-secured plan storage, and per-user isolation — every generated artifact belongs to an account, nothing lives only in the browser. You can pick up a draft on another device, revise a finalised plan weeks later (Claude re-runs the flow against the stored version), import upstream artifacts as context for downstream generators, and export anything to Markdown, PDF, or DOCX. Drafts auto-save during streaming, plans auto-save on completion — you never lose work to a tab close.
Key Decisions
- →R3F over Spline or no-code 3D
Spline would have been up and running in an hour, but custom shaders and scroll-coupled state updates aren't possible there. R3F gives full Three.js access inside a React lifecycle — more work, but no ceiling on the effects.
- →Iterative 2D upgrades over a 3D hero rebuild
An R3F "convergence" hero (5 phase orbs spiralling into the title with shockwave + bloom) was built and then scrapped — too subtle, not haptic enough, a lot of code for little wow. Instead the existing 2D Canvas particle field and Framer-Motion ConvergingOrbs got layered glow, blur fade-ins, and mouse interaction. More impact, less weight.
- →Live materials over pre-rendered images
Transmission + metalness react live to phase color and lighting. Pre-rendered images would have required rendering every phase × every theme × every lighting state in advance — no room left for interaction.
- →LLM as challenger, not writer
Default prompting would have let the AI fill gaps on its own — plausible, but unverified. The explicit "you are not a writer" forces follow-up questions and turns the generator into a tool for clarity, not text mass.