mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat: content-aware HDDBore and TrenchLaying animations with drillbit transition

Browse Source 
Former-commit-id: 1a541fc31c5b24aa083c3441a9ab642c7d49da59
This commit is contained in:
Marc Mintel
2026-05-11 21:49:57 +02:00
parent e33dcdddac
commit 2e1e34a617
12 changed files with 236 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/blocks/CompetenceBentoGrid.tsx
View File

@@ -7,8 +7,8 @@ import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { StratumLines } from '@/components/ui/decorations/StratumLines';
import { AbstractBore } from '@/components/ui/decorations/AbstractBore';
import { AbstractTrench } from '@/components/ui/decorations/AbstractTrench';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
interface CompetenceBentoGridProps {
badge?: string;
@@ -170,10 +170,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
})}
</div>
</div>
{/* Minimalist Abstract Drilling */}
<AbstractBore className="top-1/4 opacity-40" invert />
{/* Minimalist Abstract Trenching */}
<AbstractTrench className="bottom-0 opacity-40" invert />
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-40" invert />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-40" invert />
</section>
);
}

12
components/blocks/HeroSection.tsx
View File

@@ -3,8 +3,8 @@ import Image from 'next/image';
import Reveal from '@/components/Reveal';
import { Badge, Container, Heading } from '@/components/ui';
import { Button } from '@/components/ui/Button';
import { AbstractBore } from '@/components/ui/decorations/AbstractBore';
import { AbstractTrench } from '@/components/ui/decorations/AbstractTrench';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface HeroSectionProps {
title: string;
@@ -72,10 +72,10 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
)}
</div>
</Container>
{/* Minimalist Abstract Drilling (HDD) */}
<AbstractBore className="top-1/3 -translate-y-1/2 opacity-60" />
{/* Minimalist Abstract Trenching */}
<AbstractTrench className="bottom-0 opacity-60" />
{/* Content-Aware Animation: HDD Drilling & Pipe Pullback */}
<HDDBoreAnimation className="top-1/3 -translate-y-1/2 opacity-60" />
{/* Content-Aware Animation: Trench Cutting & Pipe Laying */}
<TrenchLayingAnimation className="bottom-0 opacity-60" />
</section>
</Reveal>
);

6
components/blocks/HeroVideo.tsx
View File

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/Button';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect } from 'react';
import { AbstractBore } from '@/components/ui/decorations/AbstractBore';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
interface HeroVideoProps {
data?: any;
@@ -109,8 +109,8 @@ export function HeroVideo(props: HeroVideoProps) {
</div>
</motion.div>
</div>
{/* Minimalist Abstract Drilling */}
<AbstractBore className="bottom-0 opacity-40 z-[5]" />
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="bottom-0 opacity-40 z-[5]" />
</div>
);
}

12
components/blocks/ReferencesSlider.tsx
View File

@@ -5,8 +5,8 @@ import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { AbstractBore } from '@/components/ui/decorations/AbstractBore';
import { AbstractTrench } from '@/components/ui/decorations/AbstractTrench';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface Reference {
id: string;
@@ -153,10 +153,10 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</Link>
</div>
{/* Minimalist Abstract Drilling */}
<AbstractBore className="top-1/4 opacity-30" />
{/* Minimalist Abstract Trenching */}
<AbstractTrench className="bottom-0 opacity-30" />
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-30" />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-30" />
</section>
);
}

6
components/blocks/ServiceDetailGrid.tsx
View File

@@ -3,7 +3,7 @@
import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { AbstractTrench } from '@/components/ui/decorations/AbstractTrench';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface ServicePanelData {
id: string;
@@ -230,8 +230,8 @@ export function ServiceDetailGrid({
})}
</motion.div>
</div>
{/* Minimalist Abstract Trenching */}
<AbstractTrench className="bottom-0 opacity-20" invert />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-20" invert />
</section>
);
}

12
components/blocks/SubCompanyTiles.tsx
View File

@@ -4,8 +4,8 @@ import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { AbstractBore } from '@/components/ui/decorations/AbstractBore';
import { AbstractTrench } from '@/components/ui/decorations/AbstractTrench';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
interface SubCompanyTilesProps {
badge?: string;
@@ -199,10 +199,10 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
})}
</motion.div>
</div>
{/* Minimalist Abstract Drilling */}
<AbstractBore className="top-1/4 opacity-40" />
{/* Minimalist Abstract Trenching */}
<AbstractTrench className="bottom-0 opacity-40" />
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-40" />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-40" />
</section>
);
}