diff --git a/package-lock.json b/package-lock.json
index cc5ab20..e4b9653 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nice-anim",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/nice-anim/nice-anim-config.ts b/src/components/nice-anim/nice-anim-config.ts
new file mode 100644
index 0000000..be6a505
--- /dev/null
+++ b/src/components/nice-anim/nice-anim-config.ts
@@ -0,0 +1,34 @@
+export enum SSRMode {
+  Static = 'STATIC',
+  Rehydrate = 'REHYDRATE',
+}
+
+export class NiceAnimConfig {
+
+  public fallbackCssClass: string;
+
+  public ssrMode: SSRMode;
+
+  public get ssrCssClass(): string {
+    if (this.ssrMode === SSRMode.Static) {
+      return '';
+    } else if (this.ssrMode === SSRMode.Rehydrate) {
+      return 'nice-anim';
+    }
+  }
+
+
+  private static instance: NiceAnimConfig = null;
+
+  private constructor() {
+    this.ssrMode = SSRMode.Rehydrate;
+    this.fallbackCssClass = '';
+  }
+
+  static getInstance() {
+    if (!NiceAnimConfig.instance) {
+      NiceAnimConfig.instance = new NiceAnimConfig();
+    }
+    return NiceAnimConfig.instance;
+  }
+}
diff --git a/src/components/nice-anim/nice-anim.tsx b/src/components/nice-anim/nice-anim.tsx
index 28bc1b8..81f2a54 100644
--- a/src/components/nice-anim/nice-anim.tsx
+++ b/src/components/nice-anim/nice-anim.tsx
@@ -1,4 +1,6 @@
-import { Component, Element, Prop, h } from '@stencil/core';
+import { Component, Element, Prop, h, Build } from '@stencil/core';
+
+import { NiceAnimConfig } from './nice-anim-config';
 
 @Component({
   tag: 'nice-anim',
@@ -35,10 +37,28 @@ export class NiceAnim {
 
   io: IntersectionObserver;
 
+  hasIOSupport: boolean;
+
+  config: NiceAnimConfig;
+
+  cssClass: string;
+
+  constructor() {
+    this.hasIOSupport = typeof IntersectionObserver !== 'undefined';
+    this.config = NiceAnimConfig.getInstance();
+    this.cssClass = Build.isBrowser
+      ? this.hasIOSupport
+        ? 'nice-anim'
+        : this.config.fallbackCssClass
+      : this.config.ssrCssClass;
+  }
+
   componentDidLoad() {
-    this.addIntersectionObserver();
-    const animationDistance = this.direction === 'right' || this.direction === 'down' ? '-' + this.animationDistance : this.animationDistance;
-    (this.el.querySelector('.nice-anim') as HTMLElement).style.setProperty('--distance', animationDistance);
+    if (this.hasIOSupport) {
+      this.addIntersectionObserver();
+      const animationDistance = this.direction === 'right' || this.direction === 'down' ? '-' + this.animationDistance : this.animationDistance;
+      (this.el.querySelector('.nice-anim') as HTMLElement).style.setProperty('--distance', animationDistance);
+    }
   }
 
   addIntersectionObserver() {
@@ -63,7 +83,7 @@ export class NiceAnim {
   render() {
     return (
       <div
-        class="nice-anim"
+        class={this.cssClass}
         style={{
           animationDuration: `${this.duration}ms`,
           animationDelay: `${this.delay}ms`
diff --git a/src/index.ts b/src/index.ts
index 07635cb..9dc2f0d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './components/nice-anim/nice-anim-config'