Modern Angular libraries for building stunning 3D graphics and scroll animations
This repository contains two powerful Angular libraries for creating immersive web experiences:
- @hive-academy/angular-3d - Declarative Three.js components for 3D graphics
- @hive-academy/angular-gsap - GSAP-powered scroll animations
| Library | Version | Description |
|---|---|---|
| @hive-academy/angular-3d |  |
Declarative Three.js components - 54 components, 24 directives, 14 services |
| @hive-academy/angular-gsap |  |
GSAP scroll animations - 7 components, 19 directives, 2 services, 2 providers |
npm install @hive-academy/angular-3d three three-stdlib gsap maath troika-three-textimport { Component } from '@angular/core';
import { Scene3dComponent, BoxComponent } from '@hive-academy/angular-3d';
@Component({
selector: 'app-basic-scene',
standalone: true,
imports: [Scene3dComponent, BoxComponent],
template: `
<a3d-scene-3d [cameraPosition]="[0, 0, 5]">
<a3d-box [color]="'#ff6b6b'" />
</a3d-scene-3d>
`,
})
export class BasicSceneComponent {}npm install @hive-academy/angular-gsap gsap lenisimport { Component } from '@angular/core';
import { ScrollAnimationDirective } from '@hive-academy/angular-gsap';
@Component({
selector: 'app-hero',
standalone: true,
imports: [ScrollAnimationDirective],
template: `<h1 scrollAnimation>Animated on scroll</h1>`,
})
export class HeroComponent {}🚀 Coming soon - Interactive demo showcasing both libraries
- angular-3d Documentation - Full API reference for 3D components
- angular-gsap Documentation - Complete scroll animation guide
- Contributing Guide - How to contribute
- Code of Conduct - Community guidelines
- Node.js 20+
- npm 10+
- Angular 20.3+
# Clone repository
git clone https://github.com/hive-academy/angular-3d-workspace.git
cd angular-3d-workspace
# Install dependencies
npm install
# Start demo application
npx nx serve angular-3d-demo# Development
npx nx serve angular-3d-demo # Start dev server
npx nx test angular-3d # Run unit tests
npx nx build angular-3d # Build library
# Quality checks
npx nx lint angular-3d # Lint library
npx nx typecheck angular-3d # Type checking
npx nx run-many -t lint test build # Run all checks
# View dependency graph
npx nx graphThis workspace uses Nx release tooling for automated versioning and publishing.
# Create version and tag
npm run release:version -- --projects=@hive-academy/angular-3d
git push && git push --tags
# CI/CD automatically publishes to npm# Set NPM token
export NPM_TOKEN=<your_npm_token>
# Preview changes
npm run release:version:dry -- --projects=@hive-academy/angular-3d
# Create version and publish
npm run release:version -- --projects=@hive-academy/angular-3d
npm run release:publish -- --projects=@hive-academy/angular-3d
git push && git push --tagsFor detailed publishing instructions, see CONTRIBUTING.md.
MIT © Hive Academy
Contributions are welcome! Please read our Contributing Guide and Code of Conduct.