HIPM
HIPM is a team framework; my part is the design, the web UI, and the AI generators that produce its artefacts. A holographic phase wheel in R3F, a 2D-canvas particle field, the converging-orbs landing, glassmorphism throughout — all in Three.js + R3F + Framer Motion, hand-built rather than assembled from a kit.
Four ways to combine Three.js, R3F, and Framer Motion. Click any card to try it.
↓ 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 phase wheel, up close
Holographic materials, physics-based interactions, scroll-driven animation. I wrote the shaders and the geometry myself; nothing here came out of a UI kit.
// 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
Four AI generators cover the START phase — Projektsteckbrief, Stakeholder-Analyse, Risikoübersicht, Kommunikationsplan — each wired to Claude via the Anthropic API. Claude drafts, leaves typed Rückfragenwhere the project is unclear, then finalises against your answers and scores a Reifegrad. The system prompt makes it a challenger, not a writer: it won't close a gap on its own.
// 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.`;The generator in the browser
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
Supabase handles auth and plan storage with row-level security, so artifacts belong to an account, not a browser tab. Drafts save while they stream; plans export to Markdown, PDF, or DOCX. A closed tab never costs you anything.
Where I drew the lines
- →R3F instead of Spline
Spline would have run in an hour, but it can't do custom shaders or scroll-coupled state. R3F gives me full Three.js inside the React lifecycle.
- →I scrapped the 3D hero
I built an R3F convergence hero first — five orbs spiralling into the title with shockwave and bloom — then threw it out. Too subtle for the code it cost. The 2D Canvas field landed harder at a fraction of the weight.
- →Live materials, not pre-rendered images
Transmission and metalness react to phase color and lighting in real time. Baking images would have meant rendering every phase against every theme up front, with nothing left to interact with.
- →The LLM challenges, it doesn't write
Left alone, the model fills gaps with plausible but unchecked text. Telling it plainly that it isn't a writer forces the follow-up questions that make the output worth trusting.