Arctic Ocean Fractal is an animated React SVG component with a flat, simple and elegant appearance.

It consists of an canvas showing a arctic ocean fractal the ocean with its lively biodiversity, multiple beautiful floating jellyfishes and a a scary-looking anglerfish. The overall animation should represent the strengths of a community that can achieve anything if it holds together.

Next to the main animation poses the component can be customized in aspects like the total animation duration. A callback function can be passed to be called when the show/hide animation has been completed.

The component is build and dependent on the awesome styled-components and React Pose projects. It was mainly developed for the usage and integration with Nord, therefore all default colors are based on Nord's color palettes.

Quick Start

npm install --save react react-dom arctic-ocean-fractal styled-components react-pose

Getting Started

Installation

Add the package as dependency to your project:

npm install --save arctic-ocean-fractal

Run npm install from within the project root to bootstrap the project and install the development- and runtime dependencies. Note that this will not install the required styled-components and react-pose packages that are defined as peer dependencies and must be installed separately like described in the peer dependencies section below.

Peer Dependencies

This package uses Styled Components and React Pose API functions that return React components.

Therefore, next to React and React DOM, this package depends on the styled-components and react-pose packages defined as peer dependencies.

Linux & macOS users can easily install all peer dependencies by using npx, introduced in [email protected], which comes pre-bundled with Node.js 8.2.0 or higher:

npx install-peerdeps arctic-ocean-fractal

When using npm < 5.2.0, npx is not pre-bundled, but users can either simply install it globally and then run the above command or install the install-peerdeps package locally/globally to let it handle the installation of all peer dependencies.

# Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps arctic-ocean-fractal

# …or globally.
npm install -g install-peerdeps
install-peerdeps arctic-ocean-fractal

Manually

All peer dependencies can also be installed manually (e.g. for users running a Microsoft Windows based system) by installing the correct version of each package:

# Show a list of all required peer dependencies
npm info "arctic-ocean-fractal@latest" peerDependencies

# Install all required peer dependencies
npm install --save arctic-ocean-fractal react react-dom react-pose styled-components

Usage

Arctic Ocean Fractal can be used by importing the default exported React component ArcticOceanFractal.

import ArcticOceanFractal from "arctic-ocean-fractal";

The component can now be placed somewhere in the render tree:

// Within a simple function component…
const CustomFunctionComponent = props => (
  <div>
    <ArcticOceanFractal pose="hide" {...props} />
  </div>
);

// …or a class component.
class CustomFunctionComponent extends Component {
  /* ... */
  render() {
    return (
      <div>
        <ArcticOceanFractal pose="hide" />
      </div>
    );
  }
}

The available animation pose names are also available as constants through named exports:

• POSE_HIDE — The name of the hide animation pose
• POSE_SHOW — The name of the show animation pose

import { POSE_HIDE, POSE_SHOW } from "arctic-ocean-fractal";

NOTE: The component itself doesn't define any sizing attributes and inherits from the parent element like the <div> in the example above. Therefore it must be wrapped in a container to control the width and height of the component.

To trigger the animation change the passed hide animation pose to the show animation, e.g. by using a class-based component and store the name of the current pose in the state that can be toggled through a function:

import React, { Component } from "react";
import ArcticOceanFractal, { POSE_HIDE, POSE_SHOW } from "arctic-ocean-fractal";

class CustomFunctionComponent extends Component {
  state = {
    pose: POSE_HIDE
  };

  togglePose = () => this.setState(({ pose }) => ({ pose: pose === POSE_HIDE ? POSE_SHOW : POSE_HIDE }));

  render() {
    const { pose } = this.state;

    return (
      <div>
        <button onClick={this.togglePose}>Toggle Animation Pose</button>
        <ArcticOceanFractal pose={pose} />
      </div>
    );
  }
}

Make sure to read the React Pose documentation for more details if you're not already familiar with the animation concept with poses.

Customization

The component can be customized through props. All available props are documented in more detail in the sections below.

Animation Duration

Prop: duration
Type: number
Default: 3200(ms)
Required: No

The total animation duration in milliseconds.

<ArcticOceanFractal pose="hide" duration={2000} />

Animation Completion Callback

Prop: onAnimationComplete
Type: function
Default: () => {}(noop)
Required: No

The function that will be called when the pose animation has been completed.

const handleAnimationCompletion = () => console.log("Arctic Ocean Fractal pose animation has been completed!");

<ArcticOceanFractal pose="hide" onAnimationComplete={handleAnimationCompletion} />;

Animation Pose

Prop: pose
Type: string
Default: -
Required: Yes
Values: hide|show

The pose prop is currently the only required prop and defines the name of the actual animation pose. This can either be hide or show where the first one starts the animation that puts the anglerfish in the foreground while the second one makes it hide behind the ocean's underground stones and “blobs in“ the jellyfishes.

Note that both animation pose names are also available as constants as named exports:

• POSE_HIDE — The name of the hide animation pose
• POSE_SHOW — The name of the show animation pose

import { POSE_HIDE, POSE_SHOW } from "arctic-ocean-fractal";

Development Workflow

Run npm install from within the project root to bootstrap the project and install the development- and runtime dependencies.

The project is configured for the opinionated code formatter Prettier which provides integration support for many editors to e.g. automatically format the source file on save.

Building

A distribution build can be created with Rollup by running

npm run build

Continuous integration builds are running at Circle CI.

Testing

Linting

JavaScript sources are linted with ESLint using the arcticicestudio configuration which can be run with

npm run lint:js

Markdown sources are linted with remark-lint using the arcticicestudio-preset which can be run with

npm run lint:md

All linting tasks can be run with

npm run lint

Contributing

Read the contributing guide to learn about the development process and how to propose enhancement suggestions and report bugs, how to submit pull requests and the project's styleguides, branch organization and versioning model.

The guide also includes information about minimal, complete, and verifiable examples and other ways to contribute to the project like improving existing issues and giving feedback on issues and pull requests.