Nerds Pledge Magnanimously

    arctic-ocean-fractal

    0.1.0 • Public • Published

    An animated fractal of the arctic ocean

    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 npm@5.2.0, 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.


    Copyright © 2019-present Arctic Ice Studio & Sven Greb

    Install

    npm i arctic-ocean-fractal

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    1.34 MB

    Total Files

    13

    Last publish

    Collaborators

    • arcticicestudio